当前位置：首页 > news >正文

CSS选择器高级用法：精准控制样式

news 2026/4/25 16:30:01

CSS选择器高级用法：精准控制样式

引言

CSS选择器是CSS的核心组成部分，它决定了哪些元素会应用特定的样式规则。掌握CSS选择器的高级用法，可以让你更加精准地控制页面元素的样式，提高代码的可读性和可维护性。本文将深入探讨CSS选择器的高级用法，帮助你成为CSS选择器的专家。

基本选择器回顾

在深入高级选择器之前，让我们先回顾一下基本的CSS选择器：

元素选择器：p { color: red; }
类选择器：.class { color: red; }
ID选择器：#id { color: red; }
通配符选择器：* { margin: 0; padding: 0; }

组合选择器

后代选择器

选择某个元素的所有后代元素：

/* 选择div内的所有p元素 */ div p { color: blue; }

子选择器

选择某个元素的直接子元素：

/* 选择div的直接子元素p */ div > p { color: blue; }

相邻兄弟选择器

选择紧接在某个元素后的兄弟元素：

/* 选择p元素后的第一个div元素 */ p + div { margin-top: 20px; }

通用兄弟选择器

选择某个元素后的所有兄弟元素：

/* 选择p元素后的所有div元素 */ p ~ div { margin-top: 10px; }

伪类选择器

状态伪类

链接状态

/* 未访问的链接 */ a:link { color: blue; } /* 已访问的链接 */ a:visited { color: purple; } /* 鼠标悬停时 */ a:hover { color: red; } /* 激活状态 */ a:active { color: green; }

表单状态

/* 获得焦点的输入框 */ input:focus { border-color: blue; outline: none; } /* 禁用的输入框 */ input:disabled { background-color: #f5f5f5; cursor: not-allowed; } /* 选中的复选框 */ input:checked { /* 样式 */ }

结构伪类

位置伪类

/* 选择第一个子元素 */ ul li:first-child { font-weight: bold; } /* 选择最后一个子元素 */ ul li:last-child { color: red; } /* 选择第n个子元素 */ ul li:nth-child(2) { background-color: yellow; } /* 选择偶数位置的子元素 */ ul li:nth-child(even) { background-color: #f0f0f0; } /* 选择奇数位置的子元素 */ ul li:nth-child(odd) { background-color: #e0e0e0; } /* 选择前3个子元素 */ ul li:nth-child(-n+3) { color: blue; }

类型伪类

/* 选择第一个某种类型的子元素 */ div p:first-of-type { font-size: 18px; } /* 选择最后一个某种类型的子元素 */ div p:last-of-type { font-style: italic; } /* 选择第n个某种类型的子元素 */ div p:nth-of-type(2) { color: green; }

空元素和唯一子元素

/* 选择没有子元素的元素 */ div:empty { display: none; } /* 选择是其父元素唯一子元素的元素 */ p:only-child { color: red; } /* 选择是其父元素唯一某种类型子元素的元素 */ p:only-of-type { font-weight: bold; }

否定伪类

/* 选择不是p元素的所有元素 */ :not(p) { margin: 0; } /* 选择没有class为special的p元素 */ p:not(.special) { color: gray; } /* 选择不是第一个子元素的li元素 */ ul li:not(:first-child) { margin-top: 10px; }

伪元素选择器

常用伪元素

/* 在元素内容前插入内容 */ p::before { content: "→ "; color: red; } /* 在元素内容后插入内容 */ p::after { content: " ←"; color: blue; } /* 选择元素的第一个字母 */ p::first-letter { font-size: 2em; font-weight: bold; color: red; } /* 选择元素的第一行 */ p::first-line { font-weight: bold; color: blue; } /* 选择用户选择的文本 */ ::selection { background-color: yellow; color: black; }

属性选择器

基本属性选择器

/* 选择具有某个属性的元素 */ [title] { color: red; } /* 选择属性值等于某个值的元素 */ [title="example"] { color: blue; } /* 选择属性值包含某个值的元素 */ [title*="example"] { color: green; } /* 选择属性值以某个值开头的元素 */ [title^="ex"] { color: purple; } /* 选择属性值以某个值结尾的元素 */ [title$="ple"] { color: orange; } /* 选择属性值包含某个完整单词的元素 */ [title~="example"] { color: pink; } /* 选择属性值以某个值开头且后面跟连字符的元素 */ [lang|="en"] { color: brown; }

表单属性选择器

/* 选择类型为文本的输入框 */ input[type="text"] { width: 200px; } /* 选择类型为密码的输入框 */ input[type="password"] { width: 200px; } /* 选择类型为提交的按钮 */ input[type="submit"] { background-color: blue; color: white; }

高级选择器组合

复杂选择器组合

/* 选择class为container的div内的第2个p元素 */ div.container > p:nth-child(2) { color: red; } /* 选择class为nav的ul内的所有li元素，且这些li元素不是最后一个子元素 */ ul.nav > li:not(:last-child) { margin-right: 20px; } /* 选择具有data-role属性且值为button的元素，当鼠标悬停时 */ [data-role="button"]:hover { background-color: #f0f0f0; } /* 选择表单中被禁用的输入框，且是只读的 */ input:disabled:read-only { background-color: #e0e0e0; }

选择器优先级

CSS选择器的优先级从高到低：

内联样式：style="color: red;"
ID选择器：#id
类选择器、伪类选择器、属性选择器：.class,:hover,[attr]
元素选择器、伪元素选择器：div,::before

计算优先级的方法：

内联样式：1000
ID选择器：100
类选择器、伪类选择器、属性选择器：10
元素选择器、伪元素选择器：1

/* 优先级：100 + 10 + 1 = 111 */ #container .item p { color: red; } /* 优先级：10 + 10 + 1 = 21 */ .container .item p { color: blue; } /* 优先级：100 + 1 = 101 */ #container p { color: green; }

实际项目中的应用

导航栏样式

/* 导航栏基本样式 */ .nav { display: flex; list-style: none; padding: 0; margin: 0; } /* 导航项样式 */ .nav > li { position: relative; margin-right: 20px; } /* 导航链接样式 */ .nav > li > a { display: block; padding: 10px 15px; color: #333; text-decoration: none; transition: all 0.3s ease; } /* 导航链接悬停效果 */ .nav > li > a:hover { color: #007bff; } /* 下拉菜单样式 */ .nav > li > ul { position: absolute; top: 100%; left: 0; background: white; list-style: none; padding: 0; margin: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transition: all 0.3s ease; } /* 下拉菜单项样式 */ .nav > li > ul > li { width: 200px; } /* 下拉菜单链接样式 */ .nav > li > ul > li > a { display: block; padding: 10px 15px; color: #333; text-decoration: none; transition: all 0.3s ease; } /* 下拉菜单链接悬停效果 */ .nav > li > ul > li > a:hover { background-color: #f0f0f0; color: #007bff; } /* 鼠标悬停在导航项上时显示下拉菜单 */ .nav > li:hover > ul { opacity: 1; visibility: visible; } /* 最后一个导航项没有右边距 */ .nav > li:last-child { margin-right: 0; }

表单样式

/* 表单容器 */ .form-container { max-width: 600px; margin: 0 auto; padding: 20px; } /* 表单组 */ .form-group { margin-bottom: 20px; } /* 标签样式 */ .form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; } /* 输入框样式 */ .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; transition: all 0.3s ease; } /* 输入框获得焦点时的样式 */ .form-group input[type="text"]:focus, .form-group input[type="email"]:focus, .form-group input[type="password"]:focus, .form-group textarea:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0,123,255,0.1); } /* 复选框和单选按钮 */ .form-group input[type="checkbox"], .form-group input[type="radio"] { margin-right: 5px; } /* 提交按钮 */ .form-group input[type="submit"] { background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; } /* 提交按钮悬停效果 */ .form-group input[type="submit"]:hover { background-color: #0056b3; } /* 禁用的表单元素 */ .form-group input:disabled, .form-group textarea:disabled { background-color: #f5f5f5; cursor: not-allowed; } /* 必填字段标记 */ .form-group label::after { content: " *"; color: red; } /* 没有required属性的标签不显示星号 */ .form-group label:not(:has(+ input[required]))::after { content: ""; }