css伪类与伪元素

电玩女神 2022-07-26 00:06 337阅读 0赞

在css1中就引入了伪类和伪元素的概念，伪类可以对一个元素的不同状态或者类型进行区分，添加特殊效果。伪元素能为元素的组成部分，或是文本结点内容添加特殊效果。

# 伪类  #

我的导师曾说"认识事物可以采用分类法，简单化事物采用分步法"。我们都知道伪类在css1中就存在了，是在HTML元素处于某种状态时，为该元素添加css样式。之后，css2,css3又添加和完善了好些伪类。

## 结构化伪类  ##

结构化伪类常被用于选择那些简单选择器无法访问的元素，这种元素在结构上存在某种关系(如某个元素的第一个或最后一个或者倍数个)，为选中的元素添加css样式。

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px"> 
 <thead> 
 <tr> 
 <td style="background:rgb(94,94,94)"> 选择符 </td> 
 <td style="background:rgb(94,94,94)"> 描述 </td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：first-child </td> 
 <td style="background:rgb(238,238,238)"> 匹配父元素的第一个子元素E。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：last-child </td> 
 <td style="background:rgb(238,238,238)"> 匹配父元素的最后一个子元素E。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：only-child </td> 
 <td style="background:rgb(238,238,238)"> 匹配父元素仅有的一个子元素E。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：only-of-type </td> 
 <td style="background:rgb(238,238,238)"> 匹配同类型中的唯一的一个同级兄弟元素E。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：first-of-type </td> 
 <td style="background:rgb(238,238,238)"> 匹配同类型中的第一个同级兄弟元素E。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：last-of-type </td> 
 <td style="background:rgb(238,238,238)"> 匹配同类型中的最后一个同级兄弟元素E。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：nth-child(n) &nbsp; </td> 
 <td style="background:rgb(238,238,238)"> 匹配父元素的第n个子元素E。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)">E：nth-last-child(n) &nbsp; </td> 
 <td style="background:rgb(238,238,238)"> 匹配父元素的倒数第n个子元素E。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：nth-last-type(n) &nbsp; </td> 
 <td style="background:rgb(238,238,238)"> 匹配同类型中的第n个同级兄弟元素E。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：nth-last-of-type(n)&nbsp; </td> 
 <td style="background:rgb(238,238,238)"> 匹配同类型中的倒数第n个同级兄弟元素E。 </td> 
 </tr> 
 </tbody> 
</table>

## **UI元素状态伪类** ##

UI元素状态伪类用于根据UI元素的状态对他们进行选择。

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px"> 
 <thead> 
 <tr> 
 <td style="background:rgb(94,94,94)"> 选择符 </td> 
 <td style="background:rgb(94,94,94)"> 描述 </td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：link </td> 
 <td style="background:rgb(238,238,238)"> 设置超链接a在未被访问前的样式。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：visited </td> 
 <td style="background:rgb(238,238,238)"> 设置超链接a在其链接地址已被访问过时的样式。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：hover </td> 
 <td style="background:rgb(238,238,238)"> 设置元素在其鼠标悬停时的样式。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：active </td> 
 <td style="background:rgb(238,238,238)"> 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：checked </td> 
 <td style="background:rgb(238,238,238)"> 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：enabled </td> 
 <td style="background:rgb(238,238,238)"> 匹配用户界面上处于可用状态的元素E。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：disabled </td> 
 <td style="background:rgb(238,238,238)"> 匹配用户界面上处于禁用状态的元素E。 </td> 
 </tr> 
 </tbody> 
</table>

## 其他伪类 ##

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px"> 
 <thead> 
 <tr> 
 <td style="background:rgb(94,94,94)"> 选择符 </td> 
 <td style="background:rgb(94,94,94)"> 描述 </td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：target </td> 
 <td style="background:rgb(238,238,238)"> 匹配相关URL指向的E元素。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：empty </td> 
 <td style="background:rgb(238,238,238)"> 匹配没有任何子元素（包括text节点）的元素E。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：root </td> 
 <td style="background:rgb(238,238,238)"> 匹配E元素在文档的根元素。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(238,238,238)"> E：not(s) </td> 
 <td style="background:rgb(238,238,238)"> 匹配不含有s选择符的元素E。 </td> 
 </tr> 
 </tbody> 
</table>

#    伪元素 #

与伪类一样，伪元素提供的也是文档树中没有具体指明的信息，但不同的是伪类是作用在元素上，而伪元素作用的更深一层：在元素中的特定内容上。CSS3将伪元素前面的单个修改为双冒号用以区别伪类，但以前的写法仍然有效。

#    区别 #

简单的在这里举个伪类和伪元素区别的例子

**伪类**

效果图：

![Center][]

如果我们不使用伪类呢？想要给第二个P标签添加样式，就可以给第二个P标签添加一个class样式。例如：

**伪元素**

效果图：

![Center 1][]

我们可以看到第二个P标签的第一行文本内容改变了样式，如果不使用伪元素的话，可以将第一行文本嵌套在一个span标签内，设置span的样式达到效果。

综上所述我们可以看出：伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要添加一个实际的元素标签才能达到，这也是他们一称为伪类，一个称为伪元素的原因。

参考： [详解 CSS 属性 - 伪类和伪元素的区别][CSS _ -]

[Center]: /images/20220724/c3dc98fb1e90439f966e198f8a606273.png
[Center 1]: /images/20220724/eaad40377ab74a6da6b5a9a5cd2cbea9.png
[CSS _ -]: https://segmentfault.com/a/1190000000484493