Skip to main content

选择器简介

选择器的类别

选择器示例用法
元素选择器tag { }或者叫类型选择器,选择所有该标签名的元素
通配选择器* { }选择所有元素
类选择器.class { }选择具有该class名称的所有元素
ID 选择器#id{ }选择具有该id的所有元素,一般来说id设置都是唯一的
属性选择器a[prop] { }使用标签名+方括号选择具有该属性的元素
伪类选择器div:hover { }单冒号,改变已存在的元素的状态
伪元素选择器div::after { }双冒号,创建不存在的元素
后代选择器article p会递归选择所有子元素,不需要有严格的父子关系
子代选择器article > p只选择具有严格的父子关系的所有子元素
相邻兄弟选择器h1 + p当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素时,则第二个元素将被选中
通用兄弟选择器h1 ~ p元素都是属于同一个父元素的子元素,位置无须紧邻

子代选择器和后代选择器的区别

后代选择器,就是子子孙孙都包括在内;使用一个或多个空格作为分隔符;会递归选择所有子元素,不需要有严格的父子关系

div span { background-color: DodgerBlue; }

<div>
<span
>Span 1.
<span>Span 2.</span>
</span>
</div>
<span>Span 3.</span>

image-20200901222517526

子代选择器,严格选择自己的儿子;使用>作为分隔符;只选择直接子元素,即需要严格的父子关系

div > span { background-color: DodgerBlue; }

<div>
<span
>Span 1. In the div.
<span>Span 2. In the span that's in the div.</span>
</span>
</div>
<span>Span 3. Not in a div at all</span>

image-20200512110219787

兄弟选择器

  • 使用~作为两个选择器的连接符
  • 位置无须紧邻,只须同层级
li:first-of-type ~ li {
color: red;
}

<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>

image-20200901224330981

相邻兄弟选择器

  • 使用+将两个选择器连接起来
  • 同级且紧邻
li:first-of-type + li {
color: red;
}

<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>

image-20200901224240124

伪类和伪元素

  • 伪类时使用单冒号的关键字,用于当已有元素处于的某个状态时,为其添加对应的样式;比如根据用户行为变化时改变样式(:hover

weilei

  • 伪元素是双冒号的关键字,用于创建一些不在文档树中的元素,并为其添加样式
  • 一些早期的伪元素曾使用单冒号的语法,现代的浏览器为了保持后向兼容,支持早期的带有单双冒号语法的伪元素

weiyuansu

选择器的优先级

通配选择符(universal selector)(*关系选择符(combinators)(+, >, ~)和 否定伪类(negation pseudo-class)(:not())对优先级没有影响,但是,在 :not() 内部声明的选择器会影响优先级。

因为选择器之间可以组合使用,最后计算选择器的优先级按照下面四个部分相加 (分量)的方式:

  1. 千位: 如果声明在 style 的属性(内联样式)则该位得一分。这样的声明没有选择器,所以它得分总是 1000。
  2. 百位: 选择器中包含ID选择器则该位得一分。
  3. 十位: 选择器中包含类选择器、属性选择器或者伪类则该位得一分,除了否定伪类:not()
  4. 个位:选择器中包含元素、伪元素选择器则该位得一分。

image-20200901230109064

  • !important规则会覆盖任何其他样式选择,包括内联样式;使用!important的选择器之间也具有优先级