【CSS】CSS 伪类和伪元素-蒲公英云

- - 1. 什么是伪类和伪元素？
  - - 1.1 伪类
    - 1.2 伪元素
  - 1. 伪类和伪元素的使用场景？
  - - 2.1 伪类的应用
    - - 2.1.1 在 a 标签中的应用
      - 2.1.2 表单验证
      - 2.1.3 元素索引
    - 2.2 伪元素的应用
    - - 2.2.1 使用 :after 清除浮动
      - 2.2.2 插入文本内容
      - 2.2.3 插入非文本内容
  - 1. CSS3中的伪类和伪元素
  - - 3.1 CSS3中的伪类
    - 3.2 CSS3中的伪元素

前言： 最近在项目练习中使用了很多伪类和以及伪元素，但是对这些知识只有一知半解的理解，下面就来整理一下相关知识，以便后面再使用的时候能够得心应手。

1. 什么是伪类和伪元素？

1.1 伪类

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态，在不同的状态下，有不同的样式。伪类更多的定义的是状态，常见的伪类如下表：

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向元素的第一个子元素添加样式。
:last-child	向元素的最后一个子元素添加样式。
:nth-child(n)	向元素的第n个子元素添加样式。
:required	指定具有 required属性的表单元素。
:valid	指定一个匹配指定要求的表单元素。
:invalid	指定一个不匹配指定要求的表单元素。

1.2 伪元素

CSS 伪元素用于向某些选择器设置特殊效果，常见的伪元素有以下几个：

属性	描述
:first-letter	向文本的第一个字母添加特殊样式。
:first-line	向文本的首行添加特殊样式。
:before	在元素之前添加内容。
:after	在元素之后添加内容。

需要注意的是： 在CSS3中明确规定伪元素前面用两个冒号(::)来表示，而伪类用一个冒号来表示(:)，但是由于浏览器兼容的问题，它们都用一个冒号(:)来表示，所以比较容易混淆。

2. 伪类和伪元素的使用场景？

2.1 伪类的应用

伪类选择器可以分为两种：静态伪类和动态伪类。

静态伪类，只能用于超链接样式，例如：:link ，:visited
动态伪类，针对所有标签都使用的样式，例如：:hover，:hover，:focus

2.1.1 在 a 标签中的应用

<a>标签有四种状态：:link，:hover，:active，:visited

/* 超链接点击之前*/
  a:link{        
     color:green;
  }
 /* 超链接被被访问之后 */
  a:visited{ 
     color:orange;
  }
 /* 鼠标放在标签上时 */
  a:hover{ 
     color:red;
  }
 /* 鼠标点击超链接，但是没松手时 */
  a:active{ 
     color:skyblue;
  }

需要注意： 这四个属性必须按照以上顺序写，不然设置的样式不会生效！

还有一个小问题，就是<a>标签本身定义的属性和a:link定义的属性有什么区别呢？

a{} 定义的样式对所有的<a>标签生效
a:link 定义的样式只对有href属性的<a>标签生效

实际使用中，我们使用 a:link较少，因为a{}设置的样式也能到达同样的效果。

2.1.2 表单验证

在表单验证中，我们常会用到一下三个属性：

选择器	描述
:required	指定具有 required属性的表单元素
:valid	指定一个匹配指定要求的表单元素
:invalid	指定一个不匹配指定要求的表单元素

（1）:required 选择器在表单元素是必填项时设置指定样式。表单元素可以使用 required 属性来设置必填项。该选择器只适用于以下表单元素：input，select 和 textarea。

（2）:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。

（3）:invalid 选择器用于在表单元素中的值是非法时设置指定样式。

注意： :valid选择器和:invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

看下面的例子，对input框的email类型进行校验：

<input type="email"  placeholder="请输入" value="123456@qq.com" />
<input type="email"  placeholder="请输入" value="hello world" />
<input type="email"  placeholder="请输入" value="" required />
input:valid { 
    border-color: green;
}
input:invalid { 
    border-color: red; 
}
input:required { 
    border-color: pink;
}

显示结果：
在这里插入图片描述

2.1.3 元素索引

对于制定一系列相同的标签时，我们不需要使用JavaScript去获取，可以使用下面的属性获取：

选择器	描述
:first-child	向元素的第一个子元素添加样式。
:last-child	向元素的最后一个子元素添加样式。
:nth-child(n)	向元素的第n个子元素添加样式。
:nth-of-type(n)	向元素同类型中的第n个同级兄弟元素添加元素。

注意： 上面的选择器中的n，既可以是数字，也可以是关键字，或者一个公式。

示例：

<div>
    <h2>标题</h2>
    <p>第一段文字</p>
    <p>第二段文字</p>
    <p>第三段文字</p>
    <p>第四段文字</p>
    <p>第五段文字</p>
  </div>
<style> p:nth-child(3){ 
       color: blue;
    }
    p:nth-of-type(3){ 
       color: pink;
    }
    p:last-child{ 
      color: red;
    }
    p:first-child{ 
      color: green;
    }
</style>

在这里插入图片描述
从上面的运行结果我们可以看到，:nth-child(n)和 :nth-of-type(n) 所表示的内容是不一样的，:nth-child(n)不关注元素的类型，只关注是父元素下的第n个子元素，而 :nth-of-type(n)会关注元素的类型，设置的样式只对第n个同类的兄弟元素有效。

同样我们可以看到我们使用:first-child设置的样式没有生效，原因是p标签父元素的第一个子元素不是p标签，所以没有生效。这也说明了:first-child、:last-child 和:nth-child(n)一样，不关注元素的类型。

2.2 伪元素的应用

在使用的伪元素的时候我们需要注意以下几点：

伪元素在使用时必须设置content属性，不然是无效的
在伪元素插入的内容，只能在CSS中看到
在伪类中插入的元素通常情况下是内联元素，通常需要转化为块级元素再进行设置
伪元素不会继承父元素的样式
伪元素被应用为元素的子元素

:before和:after是我们常用的两个伪元素：

伪元素	描述
:before	在元素之前添加内容，使用 content 属性来指定要插入的内容。
:after	在元素之后添加内容，使用 content 属性来指定要插入的内容。

2.2.1 使用 :after 清除浮动

使用 :after 清除浮动是目前使用的比较多的方法，它的形式如下：

<style> .container{  
          border:1px solid #ccc; 
          background:pink; 
          margin:50px ; 
          padding:50px;
        }
        .container:after {  
          content:'';
          clear:both;
          display:block;
          height:0;
          width:0;
        }
        .div1{  
          width: 100px; 
          height:100px; 
          background:red; 
          float:left; 
        }
        .div2{  
          width: 100px; 
          height:100px; 
          background:blue; 
          float:left; 
        }
        .div3{  
          width: 100px; 
          height:100px; 
          background:skyblue; 
          float:left;
        }
</style>
<div class="container">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

如果我们不清除浮动，那父元素就会发送塌陷。

在不清除浮动之前，三个块是这样的：
在这里插入图片描述
清除浮动之后：

2.2.2 插入文本内容

<style>
    p:before{ 
      content: "题目: ";
    }
<body>
    <p>这是一段文字</p>
</body>
</style>

显示结果：
在这里插入图片描述

2.2.3 插入非文本内容

<style>   
     p:before{ 
       content: "";
       display: block;
       width: 30px;
       height: 30px;
       background:url(icon.jpg) no-repeat;
       background-size:100%;
     }
</style>
<body>
    <p>图标</p>
</body>

3. CSS3中的伪类和伪元素

3.1 CSS3中的伪类

动态伪类：

伪类	描述
:link	选择所有未被访问的链接。
:visited	选择所有已被访问的链接。
:active	选择活动链接。
:hover	选择鼠标指针位于其上的链接。
:focus	选择获得焦点的 input 元素。

状态伪类：

伪类	描述
:enabled	选择每个启用的元素。
:disabled	选择每个禁用的元素。
:checked	选择每个被选中的元素。

:nth选择器：

伪类	示例	描述
:first-of-type	p:first-of-type	选择属于其父元素的首个 `<p>` 元素的每个 `<p>` 元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后 `<p>` 元素的每个 `<p>` 元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 `<p>` 元素的每个 `<p>` 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 `<p>` 元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 `<p>` 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 `<p>` 元素的每个 `<p>` 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 `<p>` 元素。
:empty	p:empty	选择没有子元素的每个 `<p>` 元素（包括文本节点）。
:not(selector)	:not§	选择非 `<p>` 元素的每个元素。
:root	:root	选择文档的根元素。

3.2 CSS3中的伪元素

伪元素	描述
::after	已选中元素的最后一个子元素
::before	已选中元素的第一个子元素
::first-letter	选中某个款级元素的第一行的第一个字母
::first-line	匹配某个块级元素的第一行
::selection	匹配用户划词时的高亮部分