0
点赞
收藏
分享

微信扫一扫

CSS选择器一览表


1 基本选择器

  1. 通配符选择器 ​​* { }​
  2. 元素选择器 ​​body { }​
  3. 类选择器 ​​.list { }​
  4. ​ID​​​选择器 ​​#list { }​
  5. 后代选择器 ​​.list li { }​

2 基本选择器扩展

  1. 子元素选择器 ​​#wrap > .inner { }​​也可称为直接后代选择器,只能匹配到直接后代,不能匹配到深层次的后代元素
  2. 相邻兄弟选择器 ​​#wrap #first + .inner { }​​只会匹配紧跟着的兄弟元素
  3. 通用兄弟选择器 ​​#wrap #first ~ div { }​​会匹配所有的兄弟元素(不需要紧跟)
  4. 选择器分组 ​​h1,h2,h3{ }​​此处的逗号我们称之为结合符

3 属性选择器

  • 存在和值属性选择器
  • ​[attr]​​​:该选择器选择包含 ​​attr​​​属性的所有元素,不论 ​​attr​​的值是什么。
  • ​[attr=val]​​​:该选择器仅选择 ​​attr​​​ 属性被赋值为 ​​val​​ 的所有元素。
  • ​[attr~=val]​​​:表示带有以 ​​attr​​​ 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少一个值为​​val​​。
  • 子串值属性选择器
  • ​[attr|=val]​​​ : 选择​​attr​​​属性的值是​​val​​​(包括​​val​​​)或以​​val-​​开头的元素。
  • ​[attr^=val]​​​ : 选择​​attr​​​属性的值以​​val​​​开头(包括​​val​​)的元素。
  • ​[attr$=val]​​​ : 选择​​attr​​​属性的值以​​val​​​结尾(包括​​val​​)的元素。
  • ​[attr*=val]​​​ : 选择​​attr​​​属性的值中包含字符串​​val​​的元素。

4 伪类与伪元素选择器

  • 链接伪类 – 注意​​:link​​,​​:visited​​,​​:target​​是作用于链接元素的!
  • ​:link​​ 表示作为超链接,并指向一个未访问的地址的所有锚
  • ​:visited​​ 表示作为超链接,并指向一个已访问的地址的所有锚
  • ​:target​​​ 代表一个特殊的元素,它的​​id​​​是​​URI​​的片段标识符
  • 动态伪类 – 注意​​:hover​​,​​:active​​基本可以作用于所有的元素!
  • ​:hover​​ 表示悬浮到元素上
  • ​:active​​​ 表示匹配被用户激活的元素(点击按住时)
    【注意🔔】由于​​​a​​​标签的​​:link​​​和​​:visited​​​可以覆盖了所有​​a​​​标签的状态,所以当​​:link​​​,​​:visited​​​,​​:hover​​​,​​:active​​​同时出现在​​a​​​标签身上时 ​​:link​​​和​​:visited​​​不能放在最后!
    【注意🔔】 隐私与​​​:visited​​​选择器只有下列的属性才能被应用到已访问链接:​​color​​​、​​background-color​​​、​​border-color​​。
  • 表单相关伪类
  • ​:enabled​​ – 匹配可编辑的表单
  • ​:disable​​ – 匹配被禁用的表单
  • ​:checked​​ – 匹配被选中的表单
  • ​:focus​​ – 匹配获焦的表单
  • 结构性伪类
  • index的值从1开始计数!
  • index可以为变量n(只能是n)
  • index可以为even odd
    ​​​#wrap ele:nth-child(index)​​​ – 表示匹配#wrap中第index的子元素 这个子元素必须是ele。
    ​​​#wrap ele:nth-of-type(index)​​​ – 表示匹配#wrap中第index的ele子元素。
    【除此之外】:​​​nth-child​​​和​​:nth-of-type​​​有一个很重要的区别:​​nth-of-type​​以元素为中心!
  • ​:nth-child(index)​​系列
  • ​:first-child​
  • ​:last-child​
  • ​:nth-last-child(index)​
  • ​:only-child​​​ (相对于​​:first-child:last-child​​​或者 ​​:nth-child(1):nth-last-child(1)​​)
  • ​:nth-of-type(index)​​系列
  • ​:first-of-type​
  • ​:last-of-type​
  • ​:nth-last-type(index)​
  • ​:only-of-type​​​ (相对于​​:first-of-type:last-of-type​​​ 或者 ​​:nth-of-type(1):nth-last-of-type(1))​
  • ​:not​
  • ​:empty​​​(内容必须是空的,有空格都不行,有​​attr​​没关系)
  • 伪元素
  • ​::after​
  • ​::before​
  • ​::firstLetter​
  • ​::firstLine​
  • ​::selection​

5 声明的优先级

5.1 选择器的特殊性

选择器的特殊性由选择器本身的组件确定,特殊性值表述为​​4​​​个部分,如 ​​0,0,0,0​​​。
一个选择器的具体特殊性如下确定:

  1. 对于选择器中给定的​​ID​​​属性值,加 ​​0,1,0,0​
  2. 对于选择器中给定的各个类属性,属性选择,或伪类,加 ​​0,0,1,0​
  3. 对于选择器中的给定的各个元素和伪元素,加​​0,0,0,1​
  4. 通配符选择器的特殊性为​​0,0,0,0​
  5. 结合符对选择器特殊性没有一点贡献
  6. 内联声明的特殊性都是​​1,0,0,0​
  7. 继承没有特殊性

【注意 🔔】:

  • 特殊性 ​​[1,0,0,0 ]​​​大于所有以​​0​​开头的特殊性(不进位);
  • 选择器的特殊性最终都会授予给其对应的声明
  • 如果多个规则与同一个元素匹配,而且有些声明互相冲突时,特殊性越大的越占优势

【注意 🔔】:

​id​​​选择器和属性选择器的特殊性分别为:​​div[id="test"](0,0,1,1)​​​和 ​​#test(0,1,0,0)​​。

5.2 重要声明

有时某个声明比较重要,超过了所有其他声明,​​css2.1​​就称之为重要声明。并允许在这些声明的结束分号之前插入 ​​!important​​​来标志,必须要准确的放置 ​​!important​​​,否则声明无效。 ​​!important​​​总是要放在声明的最后,即分号的前面。标志为​​!important​​​的声明并没有特殊的特殊性值,不过要与非重要声明分开考虑。
实际上所有的重要声明会被浏览器分为一组,重要声明的冲突会在其内部解决。非重要声明也会被分为一组,非重要声明的冲突也会在其内部解决。如果一个重要声明与非重要声明冲突,胜出的总是重要声明。

5.3 继承

  1. 继承没有特殊性,甚至连​​0​​特殊性都没有
  2. ​0​​特殊性要比无特殊性来的强

5.4 来源

​css​​样式的来源大致有三种:

  1. 创作人员
  2. 读者
  3. 用户代理

5.5 权重:

  1. 读者的重要声明
  2. 创作人员的重要声明
  3. 创作人员的正常声明
  4. 读者的正常声明
  5. 用户代理的声明

5.6 层叠

  1. 找出所有相关的规则,这些规则都包含一个选择器
  2. 计算声明的优先级
  • 先按来源排序
  • 在按选择器的特殊性排序
  • 最终按顺序

提示:【更多详情参考✨】

  1. CSS3选择器规范地址: ​​https://www.w3.org/TR/2011/REC-css3-selectors-20110929/​​ 。
  2. CSS3选择最新选择器规范: ​​https://www.w3.org/TR/selectors​​ 。



举报

相关推荐

0 条评论