前端必备：一文吃透CSS选择器，告别样式失效的烦恼

一、基础选择器最常用必须掌握1. 通配符选择器*匹配页面中的所有元素。性能开销较大通常用于重置样式或全局设置。css* { margin: 0; padding: 0; box-sizing: border-box; }2. 标签选择器div直接选中HTML标签。它的作用域很广适合重置默认样式。cssp { color: gray; line-height: 1.5; }3. 类选择器.class最灵活、最常用的选择器。可以给多个不同的元素赋予同一个类名实现样式复用。css/* 选中所有 classhighlight 的元素 */ .highlight { background-color: yellow; } /* 选中 classbtn primary 的元素组合类 */ .btn.primary { background-color: blue; }4. ID选择器#id页面中唯一的元素理论上。ID的优先级很高通常用于锚点定位或JavaScript钩子CSS中应尽量少用以免导致优先级混乱。css#header { position: fixed; top: 0; }二、层级与组合选择器解决复杂嵌套当元素有层级关系时需要区分“后代”、“儿子”、“兄弟”。选择器符号含义示例后代选择器空格选中所有符合条件的子孙元素div p选中div里的所有p子代选择器只选中直接儿子元素div p只选儿子p不管孙子相邻兄弟选中紧挨着的下一个兄弟h1 p选紧跟在h1后面的第一个p通用兄弟~选中之后的所有兄弟h1 ~ p选h1后面所有的兄弟p实战案例css/* 导航栏激活状态只有直接子级 li.active */ .nav li.active { background: red; } /* 文章内标题后面的第一个段落不需要首行缩进 */ h2 p { text-indent: 0; }三、属性选择器动态精准匹配根据元素的属性或属性值来选中元素非常适用于输入框或自定义属性。写法含义[attr]只要包含该属性即可[attrvalue]完全匹配[attr^val]以val开头[attr$val]以val结尾[attr*val]包含val字符串[attr~val]属性值是用空格隔开的列表其中包含valcss/* 选中所有 typetext 的输入框 */ input[typetext] { border: 1px solid #ccc; } /* 选中所有 href 以 https 开头的安全链接 */ a[href^https] { padding-right: 20px; background: url(lock.svg) no-repeat right; } /* 选中所有下载链接以 .pdf .zip 等结尾 */ a[href$.pdf]::after { content: [PDF]; }四、伪类选择器基于状态与位置伪类以冒号:开头用于选中处于特定状态的元素。1. 动态伪类交互状态css/* 未访问链接 */ a:link { color: blue; } /* 鼠标悬停 */ button:hover { background: darkblue; } /* 点击瞬间 */ a:active { color: red; } /* 获得焦点 */ input:focus { outline: none; box-shadow: 0 0 5px gold; }2. 结构伪类重点中的重点无需添加额外的class仅通过元素在DOM树中的位置进行选择。css/* 第一个孩子 */ li:first-child { font-weight: bold; } /* 最后一个孩子 */ li:last-child { border-bottom: none; } /* 第3个孩子 (从1开始计数) */ li:nth-child(3) { background: #eee; } /* 偶数行 (2n 或 even) */ tr:nth-child(even) { background: #f9f9f9; } /* 奇数行 (2n1 或 odd) */ tr:nth-child(odd) { background: #fff; } /* 倒数第2个 */ li:nth-last-child(2) { color: red; } /* 同类型中的第1个忽略其他类型元素干扰 */ p:first-of-type { font-size: 1.2em; }注意nth-child看所有兄弟nth-of-type只看同标签的兄弟。3. 表单相关伪类css/* 可用与禁用 */ input:enabled { background: white; } input:disabled { background: #eee; cursor: not-allowed; } /* 选中复选框或单选框时 */ input[typecheckbox]:checked span { text-decoration: line-through; } /* 输入有效/无效配合pattern或required使用 */ input:valid { border-color: green; } input:invalid { border-color: red; } /* 必填项 */ input:required { border-left: 3px solid orange; }4. 其他常用伪类css/* 否定伪类排除某些元素 */ input:not([typesubmit]) { width: 100%; } /* 空元素 */ div:empty { display: none; }五、伪元素选择器制造虚拟内容伪元素以双冒号::开头用于创建不在DOM树中的虚拟元素。伪元素作用::before在元素内容的最前面插入内容::after在元素内容的最后面插入内容::first-line选中块级元素的第一行::first-letter选中第一个字用于首字下沉::selection用户选中的文字样式css/* 经典用法清除浮动 */ .clearfix::after { content: ; display: table; clear: both; } /* 首字下沉 */ article p::first-letter { font-size: 3em; font-weight: bold; float: left; margin-right: 5px; } /* 自定义选中颜色 */ ::selection { background: #b0d4ff; color: #000; }六、优先级规则救急必看当多个选择器作用于同一个元素时谁说了算记住这个权重口诀内联样式 ID 类/属性/伪类 标签/伪元素具体计算方式4位数字千位内联样式 (style...) ——1000百位ID选择器 (#id) ——0100十位类、属性、伪类 (.class,[type],:hover) ——0010个位标签、伪元素 (div,::before) ——0001css/* 权重值计算示例 */ * {} /* 0 */ div {} /* 1 */ div p {} /* 2 (两个标签) */ .active {} /* 10 */ .nav li.active {} /* 21 (类标签类) */ #header {} /* 100 */重要提示!important会打破所有规则除非是用来覆盖第三方库且你无计可施否则千万别用。七、实战组合写出更优雅的代码css/* 场景1表格斑马纹且鼠标划过变高亮 */ tbody tr:nth-child(even):hover { background: #ffe0b3; cursor: pointer; } /* 场景2除了最后一个按钮其他的都加右边距 */ .button-group .btn:not(:last-child) { margin-right: 10px; } /* 场景3自定义数据属性 */ [data-statuscompleted] { opacity: 0.6; text-decoration: line-through; }