伪类选择器和伪元素

阳光穿透心脏的1/2处 2022-05-21 08:57 251阅读 0赞

### 伪类选择器 ###

**什么是伪类？**伪类就是与类一样能够定义样式，但却不是真正意义上的类。  
**不是真正意义上的类？**也就是说你可以在css中定义它的样式，就像定义类一样，但是你在HTML中不能找到该伪类的踪影。  
**HTML中没有伪类的踪影，那它是如何实现样式的呢？**浏览器会在**后台**向这些伪类增加和删除元素。

对于`<a>`元素，我们可以用“**多重人格**”来形容它。对于该标签，它一共有五种**状态**：**:link**, **:visited**, **:hover**, **:focus**, **:active**.

**“:link”**可以用于声明未访问状态链接的样式；  
**“:visited”**可以用于声明已经访问链接的样式；  
**“:hover”**可以用于声明鼠标悬停在链接上的样式；  
**“:focus”**可以用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接)；  
**“:active”**可以用于声明浏览器点击链接的样式。

**注意：**冒号前后不要出现空格。

**常见伪元素**

**::first-letter,::first-line,::before,::after,::selection**

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。  
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。  
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：

<!DOCTYPE html>  
<meta charset="utf-8" />  
<style type="text/css">  
    .phoneNumber::before \{  
    content:'\\260E';  
    font-size: 15px;  
\}  
</style>  
<p class="phoneNumber">12345645654</p>

![101728385358643.png][]

这些特殊字符的html，js和css的写法是不同的，具体可查看[这里][Link 1]。

### 伪类/伪元素一览表 ###

*  伪类
    
    <table> 
     <thead> 
      <tr> 
       <th align="center">Selector</th> 
       <th align="left">Meaning</th> 
       <th align="center">CSS</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="center">:active</td> 
       <td align="left">选择正在被激活的元素</td> 
       <td align="center">1</td> 
      </tr> 
      <tr> 
       <td align="center">:hover</td> 
       <td align="left">选择被鼠标悬浮着元素</td> 
       <td align="center">1</td> 
      </tr> 
      <tr> 
       <td align="center">:link</td> 
       <td align="left">选择未被访问的元素</td> 
       <td align="center">1</td> 
      </tr> 
      <tr> 
       <td align="center">:visited</td> 
       <td align="left">选择已被访问的元素</td> 
       <td align="center">1</td> 
      </tr> 
      <tr> 
       <td align="center">:first-child</td> 
       <td align="left">选择满足是其父元素的第一个子元素的元素</td> 
       <td align="center">2</td> 
      </tr> 
      <tr> 
       <td align="center">:lang</td> 
       <td align="left">选择带有指定 lang 属性的元素</td> 
       <td align="center">2</td> 
      </tr> 
      <tr> 
       <td align="center">:focus</td> 
       <td align="left">选择拥有键盘输入焦点的元素</td> 
       <td align="center">2</td> 
      </tr> 
      <tr> 
       <td align="center">:enable</td> 
       <td align="left">选择每个已启动的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:disable</td> 
       <td align="left">选择每个已禁止的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:checked</td> 
       <td align="left">选择每个被选中的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:target</td> 
       <td align="left">选择当前的锚点元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:first-of-type</td> 
       <td align="left">选择满足是其父元素的第一个某类型子元素的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:last-of-type</td> 
       <td align="left">选择满足是其父元素的最后一个某类型子元素的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:only-of-type</td> 
       <td align="left">选择满足是其父元素的唯一一个某类型子元素的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:nth-of-type(n)</td> 
       <td align="left">选择满足是其父元素的第n个某类型子元素的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:nth-last-of-type(n)</td> 
       <td align="left">选择满足是其父元素的倒数第n个某类型的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:only-child</td> 
       <td align="left">选择满足是其父元素的唯一一个子元素的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:last-child</td> 
       <td align="left">选择满足是其父元素的最后一个元素的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:nth-child(n)</td> 
       <td align="left">选择满足是其父元素的第n个子元素的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:nth-last-child(n)</td> 
       <td align="left">选择满足是其父元素的倒数第n个子元素的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:empty</td> 
       <td align="left">选择满足没有子元素的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:in-range</td> 
       <td align="left">选择满足值在指定范围内的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:out-of-range</td> 
       <td align="left">选择值不在指定范围内的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:invalid</td> 
       <td align="left">选择满足值为无效值的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:valid</td> 
       <td align="left">选择满足值为有效值的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:not(selector)</td> 
       <td align="left">选择不满足selector的元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:optional</td> 
       <td align="left">选择为可选项的表单元素，即没有“required”属性</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:read-only</td> 
       <td align="left">选择有"readonly"的表单元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:read-write</td> 
       <td align="left">选择没有"readonly"的表单元素</td> 
       <td align="center">3</td> 
      </tr> 
      <tr> 
       <td align="center">:root</td> 
       <td align="left">选择根元素</td> 
       <td align="center">3</td> 
      </tr> 
     </tbody> 
    </table>

**注意**：p:first-child表示选择的元素既要是p标签，同时要是其父元素的第一个子元素，不要错误认为是表示p元素的第一个子元素；同理，p:first-of-type表示选择的元素要是p标签，同时要是其父元素的第一个p标签元素；其他类似的伪类含义相似。

*  伪元素
    
    <table> 
     <thead> 
      <tr> 
       <th align="center">Selector</th> 
       <th align="left">Meaning</th> 
       <th align="center">CSS</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="center">::first-letter</td> 
       <td align="left">选择指定元素的第一个单词</td> 
       <td align="center">1</td> 
      </tr> 
      <tr> 
       <td align="center">::first-line</td> 
       <td align="left">选择指定元素的第一行</td> 
       <td align="center">1</td> 
      </tr> 
      <tr> 
       <td align="center">::after</td> 
       <td align="left">在指定元素的内容前面插入内容</td> 
       <td align="center">2</td> 
      </tr> 
      <tr> 
       <td align="center">::before</td> 
       <td align="left">在指定元素的内容后面插入内容</td> 
       <td align="center">2</td> 
      </tr> 
      <tr> 
       <td align="center">::selection</td> 
       <td align="left">选择指定元素中被用户选中的内容</td> 
       <td align="center">3</td> 
      </tr> 
     </tbody> 
    </table>

[101728385358643.png]: /images/20220521/4c21fe794f0246cb9874f9c1eb25d82b.png
[Link 1]: https://blog.csdn.net/weixin_38606332/article/details/80908444