CSS – 元素选择器 – 伪类选择器

简介

伪类选择器分为两种，一种是普通伪类选择器，如 a:hover 这些，另一类是以某元素相对于父元素或兄弟元素的位置来获取无素的结构伪类。

父类伪类选择器

兄弟伪类有两种

+  : 获取当前元素的相领的满足条件的元素

下面这句样式说明查找【添加了 .first 样式的标签的相邻的 li 元素】
1.必须相邻
2.必须是指定类型的元素
.first + li {
}


<div class="first"></div>
<li>这个元素被选中</li>
<li>这个元素不被选中</li>

<div class="first"></div>
<span>这个元素不被选中</span>
<li>这个元素不被选中</li>
<li>这个元素不被选中</li>

~  : 获取当前元素的满足条件的兄弟元素

下面这句样式说明查找【添加了 .first 样式的标签的所有的相邻的 li 元素】
.first ~ li {
}

<div class="first"></div>
<span>这个元素不被选中</span>
<li>这个元素被选中</li>
<li>这个元素被选中</li>

<div class="first"></div>
<li>这个元素被选中</li>
<li>这个元素被选中</li>

相对于父元素的结构伪类

E:first-child  : 查找 E 这个元素的父元素的第一个子元素 E

<style>
  li:first-child{...}
</style>

<li>这个元素被选中</li>
<li>这个元素不被选中</li>
<li>这个元素不被选中</li>


<span>这个元素不被选中</span>
<li>这个元素不被选中</li>
<li>这个元素不被选中</li>

注意：在查找的时候并不会限制查找的元素的类型。

查找的时候限制类型

E:first-of-type  : 查找的时候只会查找满足类型条件的元素,过滤掉其它类型的元素。

<style>
  li:first-of-type{...}
</style>

<li>这个元素被选中</li>
<li>这个元素不被选中</li>
<li>这个元素不被选中</li>


<span>这个元素不被选中</span>
<li>这个元素被选中</li>
<li>这个元素不被选中</li>

E:last-child  : 最后一个子元素

<style>
  li:last-child{...}
</style>

<li>这个元素不被选中</li>
<li>这个元素不被选中</li>
<li>这个元素被选中</li>


<li>这个元素不被选中</li>
<li>这个元素不被选中</li>
<span>这个元素不被选中</span>

注意：在查找的时候并不会限制查找的元素的类型。

查找的时候限制类型

<style>
  li:last-of-type{...}
</style>

<li>这个元素不被选中</li>
<li>这个元素不被选中</li>
<li>这个元素被选中</li>



<li>这个元素不被选中</li>
<li>这个元素被选中</li>
<span>这个元素不被选中</span>

E:nth-child(n)  : 第 n 个子元素，计算方法是 E 元素的全部兄弟元素(从1开始)

<style>
  li:nth-child(3){...}
</style>

<li>这个元素不被选中</li>
<li>这个元素不被选中</li>
<li>这个元素被选中</li>

奇偶数

E:nth-child(even)  : 查找偶数元素

<style>
  li:nth-child(even){...}
</style>

<li>这个元素不被选中</li>
<li>这个元素被选中</li>
<li>这个元素不被选中</li>
<li>这个元素被选中</li>

注意：不管其它元素是否相同，都会当成奇偶数计量

E:nth-child(odd)  : 查找奇数元素

<style>
  li:nth-child(even){...}
</style>

<li>这个元素被选中</li>
<li>这个元素不被选中</li>
<li>这个元素被选中</li>
<li>这个元素不被选中</li>

注意：不管其它元素是否相同，都会当成奇偶数计量

查找的时候限制类型

如果希望在计算奇偶数时不把其它元素计入计量，可以使用限制类型

E:nth-of-type(odd)  : 限制类型下的奇数

<style>
  li:nth-of-type(odd){...}
</style>

<div>这个元素不被选中</div>>
<li>这个元素被选中</li>
<li>这个元素不被选中</li>
<li>这个元素被选中</li>
<li>这个元素不被选中</li>

E:nth-of-type(even)  : 限制类型下的偶数

<style>
  li:nth-of-type(even){...}
</style>

<div>这个元素不被选中</div>>
<li>这个元素不被选中</li>
<li>这个元素被选中</li>
<li>这个元素不被选中</li>
<li>这个元素被选中</li>

表达式

E:nth-child(n)

E:nth-of-type(n)

E:nth-last-of-type(n)

遵循线性变化的计算值，有多少个元素，n 就是多少，当 n<0 时，n无效

n : 默认取值范围为 0 ~ 子元素的长度

<style>
  li:nth-of-type( -n + 3 ){...}
</style>

<div>这个元素不被选中</div>>
<li>这个元素被选中</li>
<li>这个元素被选中</li>
<li>这个元素被选中</li>
<li>这个元素不被选中</li>

<style>
  li:nth-last-of-type( -n + 3 ){...}
</style>

<div>这个元素不被选中</div>>
<li>这个元素不被选中</li>
<li>这个元素被选中</li>
<li>这个元素被选中</li>
<li>这个元素被选中</li>

empty 空值

空值：没有任何的内容，连空格都没有

<style>
  li:empty{...}
</style>


<li></li>  -> 这个元素被选中
<li>这个元素不被选中</li>
<li>这个元素不被选中</li>
<li>这个元素不被选中</li>

target 锚点伪类样式

E:target  : 可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式。

li:target {
  ...
}
</style>

  当使用点击中下面的锚点时，焦点中的锚点会受样式影响
  <li><a href="#title1">标题一</a></li>
  <li><a href="#title2">标题二</a></li>
  <li><a href="#title3">标题三</a></li>
  <li><a href="#title4">标题四</a></li>
  <li><a href="#title5">标题五</a></li>
  <li><a href="#title6">标题六</a></li>