详解CSS3中的选择器（三）伪类选择器

阳光穿透心脏的1/2处 2023-02-14 15:56 29阅读 0赞

今天我为大家讲解下伪类选择器，这种选择器也是比较难以掌握的一种选择器。

## 什么是伪类选择器呢 ##

做过Web网页开发的童鞋都经常看到css样式中有这么一种类型`p:first-child { ... }`，像这种带有冒号（:）标志的都是伪类选择器，有的童鞋会说了，伪元素也是冒号啊，比如 `div:before {...}`。诚然，为了兼容CSS3之前的版本，伪元素是允许使用单冒号的，但还是提倡使用双冒号（::）。

伪类选择器也是最复杂的一种选择器，共有六大子类型：

*  **动态伪类选择器**
 *  **目标伪类选择器**
 *  **语言伪类选择器**
 *  **UI状态伪类选择器**
 *  **结构伪类选择器**
 *  **否定伪类选择器**

下面我们开始一个一个讲解。

## 动态伪类选择器 ##

顾名思义，动态伪类选择器是一种用户和网站交互才能体现出来的选择器。它包括两种，一种是在链接元素a中经常看到的锚点选择器，一种是用户行为选择器。

*  `E:link`\-表示链接未被访问时设置的CSS样式，属于锚点伪类。
 *  `E:visited`\-表示链接已被用户访问过设置的CSS样式，属于锚点伪类。
 *  `E:active`\-元素被点击时所设置的CSS样式，属于用户行为伪类。
 *  `E:hover`\-鼠标停留在元素上方时所设置的CSS样式，属于用于行为伪类。
 *  `E:focus`\-元素获取焦点时所设置的CSS样式，属于用户行为伪类。

我们来看下面一段代码：

<!DOCTYPE html>
          <html>
            <head>
              <title>动态伪类选择器的应用</title>
              <meta charsert="utf-8">
              <style type="text/css">
                .downlaod-info {  text-align: center;}
                .btn {  // 普通样式
                  background-color: #0074cc;
                  background-image: linear-gradient(top, #0088cc, #0055cc);
                  background-repeat: repeat-x;
                  display: inline-block;
                  border: 1px solid #cccccc;
                }
                .btn: hover {  // 鼠标悬浮状态时的样式
                  background-color:#0055cc;
                  text-docoration: none;
                  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
                  transition: background-position: 0.1s linear;
                }
                .btn: active {  // 鼠标点击时的样式
                  background-color: #0055cc;
                  background-image: none;
                  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
                }
                .btn: focus {  // 获取焦点时的样式
                  outline: thin dotted #333;
                  outline: 5px auto -webkit-focus-ring-color;
                  outline-offset: -2px;
                }
              </style>
            </head>
            <body>
              <div class="download-info">
                <a href="#" class="btn">View project on GitHub</a>
              </div>
            </body>
           </html>

在Web开发中使用动态伪类选择器时，我们通常遵守一个"爱恨原则"，也就是"link-hover-visited-active"，简写为Love。

## 目标伪类选择器 ##

目标伪类选择器只有一个":target"标识。在许多的URL中，我们在URL的最后会看到带有"\#"的片段，这其实也是锚点。在页面中，也经常在a元素中看到 `href="#flag"` 类似的属性。这些都给使用锚点选择器做了准备工作。下面我们通过一个"手风琴"的例子理解下目标伪类的妙用：

<!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="utf-8">
              <title>垂直手风琴</title>
              <style>
                * { margin:0;padding:0;}
                .listbox { 
                  width: 500px;
                  height: 400px;
                  margin: 50px auto;
                }
                .list { 
                  position: relative;
                }
                .list a { 
                  display: block;
                  height: 35px;
                  background: linear-gradient(#eeeeee, #8f8f8f);
                  text-decoration: none;
                  padding-left: 12px;
                  border-radius: 5px;
                  color:#424242;
                  line-height: 35px;
                }
                .list p { 
                  overflow: hidden;
                  height: 0px;
                  padding-left: 10px;
                  margin: 5px auto;
                  transition: 0.7s linear;
                }
                .list span { 
                  width: 0;
                  height: 0;
                  border-left: 5px solid rgba(0, 0, 0, 0);
                  border-right: 5px solid rgba(0, 0, 0, 0);
                  border-top: 5px solid white;
                  border-bottom: 5px solid rgba(0, 0, 0, 0);
                  position: absolute;
                  top: 15px;
                  right: 15px;
                }
                .list:target p { 
                  height: 100px;
                }
                .list:target a { 
                  background:linear-gradient(#6bb2ff, #2288dd);
                  color:white;
                }
                .list:target span { 
                  border-top: 5px solid transparent;
                  border-left: 5px solid #fff;
                  right: 10px;
                }
              </style>
            </head>
            <body>
              <div class="listbox">
                <div class="list" id="listOne">
                  <a href="#listOne">小狗</a>
                  <span></span>
                  <p>123456789</p>
                </div>
                <div class="list" id="listTwo">
                  <a href="#listTwo">小猫</a>
                  <span></span>
                  <p>abcdefghijk</p>
                </div>
                <div class="list" id="listThree">
                  <a href="#listThree">小牛</a>
                  <span></span>
                  <p>@%$%$^^^&&^^%%%%</p>
                </div>
              </div>
            </body>
          </html>

在这段代码中，有三个片段，三个a标签中都设置了锚点。我们在点击了某个a标记时，对应的url中就出现了带有 \#的锚点。此时，相应的div就会在0.7s内缓缓地向下展开100px，类似手风琴的效果。在style中，我们使用了三个 :target 目标伪类选择器，就是将在url中出现锚点时才会显示相应的效果。

当然目标伪类选择器还有很多其它的妙用，wiki中就用到目标伪类选择器来作为下标解说的链接。

## 语言伪类选择 ##

使用语言伪类选择器来匹配语言的元素是非常有用的，特别是用于多语言版本的网站，其作用更是明显。为文档指定语言，可以通过如下两种方式：

*  `<html lang="en-US">`
 *  `<body lang="en-US">`

我们先来看下面两段代码：

<!DOCTYPE>
          <html lang="en-US"> // 指定使用的语言为en-US
            <head>
              <meta charset="UTF-8">
              <title>语言伪类选择器运用</title>
            </head>
            <body>
              <p>WWF's goal is to:
              <q cite="http://www.wwf.org">
              build a future where people live in harmony with nature
              </q>we hope they succeed.</p>
            </body>
          </html>

<!DOCTYPE>
          <html lang="fr"> // 指定使用的语言为en-US
            <head>
              <meta charset="UTF-8">
              <title>语言伪类选择器运用</title>
            </head>
            <body>
              <p>WWF's goal is to:
              <q cite="http://www.wwf.org">
              build a future where people live in harmony with nature
              </q>we hope they succeed.</p>
            </body>
          </html>

第一段代码，使用了美式英语作为网页的语言。第二段代码，使用了法语作为网页的语言。此时，我们就可以使用语言伪类选择器对它们做不同样式的设置。  
**英语版本：**

:lang (en) { 
      quotes: '"' '"';
    }
    :lang (en) a {  background: red; }

**法语版本：**

:lang (fr) { 
      quotes: '<<" '>>';
    }
    :lang (fr) q { background: green;}

## UI状态伪类选择器 ##

UI元素状态一般包括：启用、禁用、选中、获取焦点、失去焦点、锁定和待机等等。CSS中的UI状态伪类选择器有以下三个：

*  **E:checked**\-表示选中状态。
 *  **E:enabled**\-表示启用状态。
 *  **E:disabled**\-表示禁用状态。

一般使用button标记时会用到 :disabled 这个UI状态伪类选择器。用于屏蔽按钮的点击事件。:checked通常是设置单选框和复选框选中时的样式。

## 结构伪类选择器 ##

结构伪类选择器在整个选择器中也是颇具份量的选择器。要想成为一个CSS高手，这是避不开的必修课。  
结构伪类选择器和之前说过的层次选择器在概念上有一些相似，都是基于DOM树，基于父子关系等。我们详细列举下结构伪类选择器的种类：

*  **E:first-child**\-选择E元素的父元素的第一个子元素。
 *  **E:last-child**\-选择E元素的父元素的最后一个子元素。
 *  **E:root**\-选择文档的根元素，也就是html元素。
 *  **E:nth-child(n)**\-选择E元素的父元素的第n个子元素，n可以是正整数、计算式或者关键字。
 *  **E:nth-last-child(n)**\-选择E元素的父元素的倒数第n个子元素，n可以是正整数、计算式或者关键字。
 *  **E:first-of-type**\-选择E元素的父元素下第一个E元素。
 *  **E:last-of-type**\-选择E元素的父元素下最后一个E元素。
 *  **E:nth-of-type(n)**\-选择E元素的父元素下第n个E元素。
 *  **E:nth-last-of-type(n)**\-选择E元素的父元素下倒数第n个E元素。
 *  **E:only-child**\-选择父元素只包含一个子元素，且该子元素匹配E元素。
 *  **E:only-of-type**\-选择父元素只包含一个同类型的子元素，且该子元素匹配E元素。
 *  **E:empty**\-选择没有子元素的元素，而且该元素也不包含任何文本节点。

这里有个比较难以理解的点-**n代表什么**

在上面十二个选择器中，有四个都带有参数n：

*  **:nth-child(n)**
 *  **:nth-last-child(n)**
 *  **:nth-of-type(n)**
 *  **:nth-last-of-type(n)**

实际应用中，n可以是整数（1、2、3）、计算式（2n、2n+1）、关键字（even、odd）。但是n最终的结果必须是大于等于1的整数。比如：2n-1，n可以是从0开始的整数 0、1、2…，相应的2n-1的值就为-1、1、3、… 但这里只有计算得到的结果值大于1的才能起作用。所以2n-1中1、3、5…，也就是奇数元素被选中。常用有以下几种：

*  nth-child(3)-参数n是一个具体数值，表示选择某个元素下的di3个子元素。
 *  nth-child(n)-表示选中元素所有的子元素，这里n是从0开始的整数。
 *  nth-child(2n)-表示选中的是偶元素。
 *  nth-child(2n+1)-表示选中的是奇元素。
 *  nth-child(n+5)-表示选中的是下标从5开始的子元素。
 *  nth-child(-n+5)-表示选中的是下标为小于等于5的元素。
 *  nth-child(4n+1)-表示选中的是下标为4倍数且加1的元素。

有童鞋会问了 nth-of-type(n) 有什么作用呢？

当我们在HTML中设置元素的时候是同种类型的时候，比如下拉列表是这个样子的时候：

`ul > li:nth-child(3) { background-color: red; }` 和`ul > li: nth-of-type { background-color: red; }` 效果是等价的。但如果是这个样子的呢？

上面的两个样式还是等价的吗？  
答案显然不是，为什么呢？此时ul下的第三个元素已经变成了p元素，如果使用了`ul>li:nth-child(3)` 这种模式，此时这个p元素的背景色就变成了红色。如果使用了`ul>li:nth-of-type(3)` 这种模式，此时第3个li元素，也就是ul下第5个元素的背景色就变成了红色。  
`:first-child/:last-child`和`:first-of-type/:last-of-type`也是同理。

## 否定伪类选择器 ##

否定伪类选择器":not()"主要用于定位不匹配该选择器的元素。它是非常有用的选择器，可以起到过滤内容的作用。比如: input:not(\[type=submit\])。

比如我们在网页中看到的抽奖游戏，大转盘之类的，就可以使用否定选择器来轻松地设置样式。

今天就介绍到这。