CSS 选择器全解析：从基础到进阶
本期文章我整理了css选择器从基础到进阶，包含基础选择器，组合选择器，伪类选择器和伪素选择器及语法案例优先级，典型应用场景等。看完这篇文章伪类选择器和伪元素选择器就不会傻傻分不清楚了。
选择器一览表
| * | |||||
| h1/p/img | |||||
| .btn/.nav__item | |||||
| #header/#price | |||||
| a[target] | |||||
| input[type="text"] | |||||
| a[href^="https"] | |||||
| img[src$=".webp"] | |||||
| a[href*="download"] | |||||
| h1,h2,h3 | |||||
| nav a | |||||
| ul > li | |||||
| h1 + p | |||||
| h1 ~ p | |||||
| a:link | |||||
| button:hover | |||||
| li:first-child | |||||
| tr:nth-child(even) | |||||
| p:nth-of-type(3) | |||||
| li:not(.active) | |||||
| span:only-child | |||||
| div:empty | |||||
| :root | |||||
| p::first-line | |||||
| p::first-letter | |||||
| .tip::before | |||||
| .clearfix::after | |||||
| form > fieldset:nth-child(2) input[type="checkbox"]:checked + label | |||||
| a[href$=".pdf"]:hover::after | |||||
| ul:not(.plain) li:nth-child(n+4) | |||||
| :root{--c:#ff0} .dark{--c:#333} .btn{color:var(--c)} |
伪类选择器和伪元素选择器区别
| a:hover | p::before{content:"❗";} |
注意事项
1. 优先级：行内(1-0-0) > ID(1-0-0) > 类/伪类/属性(0-1-0) > 元素/伪元素(0-0-1)
2. 伪元素双冒号(::before)与单冒号(:before)现代浏览器均支持，建议统一双冒号。
3. :nth-child(an+b) 公式从 1 开始计数；:nth-of-type 只统计同标签。
4. 尽量避免过度嵌套（>3 层），保持可读性与性能。
来源公众号：杨小样随笔
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
