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 层），保持可读性与性能。
来源公众号：杨小样随笔
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
CSS3 target 选择器_:target伪类的使用
arget作为目标伪类选择器，是css3中的新特性之一。URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。
css兄弟选择器(+ 和 ~)的使用和区别
这篇文章主要讲解css中兄弟选择器的使用，以及+和~的区别有哪些？+ 选择器：如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。 ~ 选择器：作用是查找某一个指定元素的后面的所有兄弟结点。
jquery的选择器有哪些？如何对元素取值和设置值
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作， Jquery 选择器包括：基本选择器、层叠选择器 、基本过滤选择器 、内容过滤选择器、可视化过滤选择器.....
CSS中的focus-within伪类选择器
在CSS中 :focus-within 是一个伪类，CSS中伪类:focus-within能非常方便处理获取焦点状态， 当元素本身或其后代获得焦点时，:focus-within伪类的元素就会有效。
vue 选择器_实现scoped深度作用选择器
vue项目中，当<style>标签有scoped属性时，它的 CSS 样式只作用于当前组件中的元素，父组件的样式将不会渗透到子组件中。如果你希望 scoped 样式中的一个选择器能够作用得更深，例如影响子组件
css 选择器符号
空格：后代选择器，表示div元素里面所有的p元素。> 子选择器：表示div元素里面所有的子代（不含孙代及以后）p元素，~兄弟元素选择器：表示.cls元素往后的同级的p元素
css选择器总结_30个CSS3选择器
总结30个CSS3选择器：*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。
css节点选择器
基础选择器是选择器的所有选择器的基本组成元素，也最简单，包含如下5个类别：ID选择器，标签选择器，类选择器，属性选择器，通配选择器
CSS3 中关于 *-of-type 和 *-child的差异性及适用场景
CSS3 中有很多表示元素序号的选择器，有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child
微信小程序文档没写支持, 但是实际支持的选择器有哪些?
目前支持的选择器有,在实践中我发现, 除了文档上说的几种选择器, 经过测试发现其实还有几种支持的选择器没有列举!还支持哪些选择器?
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!