前端学习笔记(8)css选择器(二)-阿里云开发者社区

开发者社区> 开发与运维> 正文

前端学习笔记(8)css选择器(二)

简介: 选择器分类 简单选择器:针对某一特征判断是否选中元素。 复合选择器:连续的简单选择器,根据元素特征判断是否选中单个元素。 复杂选择器:由“(空格)“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器,根据父元素或者前序元素检查单个元素。

选择器的组合

选择器列表是一个由逗号分隔的复杂选择器序列;复杂选择器则是用“空格”、“~”、“+”、“>”、“||”连接的复合选择器;复合选择器则是连写的简单选择器。
选择器的连接方式可以理解为四则运算一样有优先级。

  • 第一优先级:无连接符号,表示“且”
  • 第二优先级:“空格”、“~”、“+”、“>”、“||”
  • 第三优先级 :“,”表示“或”
    复杂选择器规定了五种连接符号。
  • “空格”:后代,表示选中所有符合条件的后代节点, 例如“ .a .b ”表示选中所有具有 class 为 a 的后代节点中 class 为 b 的节点。
  • “>” :子代,表示选中符合条件的子节点,例如“ .a>.b ”表示:选中所有“具有 class 为 a 的子节点中,class 为 b 的节点”。
  • “~”: 后继,表示选中所有符合条件的后继节点,后继节点即跟当前节点具有同一个父元素,并出现在它之后的节点,例如“ .a~.b ”表示选中所有具有 class 为 a 的后继中,class 为 b 的节点。
  • “+”:直接后继,表示选中符合条件的直接后继节点,直接后继节点即 nextSlibling。例如 “.a+.b ”表示选中所有具有 class 为 a 的下一个 class 为 b 的节点。
  • “||”:列选择器,表示选中对应列中符合条件的单元格。
    实际使用中“空格”、“>” 使用的比较常见。

选择器的优先级

  • id选择器的数目记为a;
  • 伪类选择器、class选择器和属性选择器的数目记为b;
  • 伪元素选择器和标签选择器的数目结尾c;
  • “*”不影响优先级。
specificity = base * base * a + base * b + c

其中base是一个足够大的正整数。
行内属性的优先级永远大于css规则。浏览器提供了“!important”关键字优先级高于行内属性,不推荐使用。
不同属性选择器的优先级相同。例如下面一段代码中三个属性选择器的优先级是相同。

<input type="text"/>
[type]{
}
[type="text"]{
}
[type^="t"]{
}

同一优先级的选择器遵循后面的覆盖前面的原则。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章