CSS选择器

2021-7-28 17:48:48

#前端#css

16

前言

对css各种选择器和优先级方面的复习。

选择器种类

  • ID选择器
    • 关键字：# 如 #name
  • 类选择器
    • 关键字：. 如 .name
  • 标签选择器
    • 无关键字：如 div
  • 相邻选择器
    • 关键字： + ~ 如.name + div
      • +只选择一个紧邻的元素
      • ~选择紧邻元素以及所有紧邻元素的紧邻元素
  • 子元素选择器
    • 关键字： > 如.name > div
      • 选择下一级元素
  • 后代选择器
    • 无关键字 如.name div
      • 选择所有下级元素
  • 通配符选择器
    • 关键字* *
      • 选择所有元素
  • 属性选择器
    • 关键字[]
    • 选择所有包含该属性的元素
<div rel=\"s10\" >属性选择器</div>
<style type=\"text/css\">
    div[rel=\"s10\"]{
        color: #573CC4
    }
</style>
  • 伪类选择器
    • 关键字:
    • 允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 :visited），同样的，可以根据内容的状态（例如在一些表单元素上的 :checked），或者鼠标的位置（例如 :hover 让你知道是否鼠标在一个元素上悬浮）来应用样式。
  • 伪元素选择器
    • 关键字::
    • 允许你对被选择元素的特定部分修改样式
    • 例：::first-line 伪元素可改变段落首行文字的样式。
    • 一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

优先级

权重计算

  • 权值为四位二进制数
  • 第一级：内联样式，如style=""，权值为 1000
  • 第二级：代表id选择器，如#content，权值为100
  • 第三级：代表类，伪类和属性选择器，如.content，权值为10
  • 第四级：代表标签选择器和伪元素选择器，如div p，权值为1
  • 通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0
  • 权重越大优先级越高
  • !imprtant是直接影响结果不参与权重计算过程，因此!important会覆盖其他所有选择器，优先级最高

Github登录