HTML + CSS 连载 | 10 - CSS 伪类和伪元素

html+css.jpeg

一、伪类

Pseudo-classes 即 伪类，伪类也是选择器的一种，它用于选择处于特定状态的元素，比如当鼠标放在一个元素上时，元素的文本会变色或者图片会变大等。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 鼠标放在元素上时，元素的文本会变色，字体会变大 */
    div:hover {
      color:red;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div class="box">我是div1</div>
  <div class="box">我是div2</div>
  <div class="box">我是div3</div>
</body>
</html>

当鼠标放到任何一个 div 元素上时，div 元素的文本都会变成红色，字体都会变大，效果如下：

:hover 就是一个伪类，且是一个非常常用的伪类，那么除了 :hover 之外还有其他的伪类，大概分为以下几类：

动态伪类（dynamic pseudo-class）：:link :visted :hover :active :focus
目标伪类（target pseudo-classes）：:target
语言伪类（language pseudo-classes）：:lang()
元素状态伪类（UI element states pseudo-classes）：:enabled :disabled :checked
结构伪类（structural pseudo-classes）：:nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-child :last-child :first-of-type :last-of-type() :root :only-child :only-of-type :empty
否定伪类（negation pseudo-classes）：:not()

全部的结构伪类可以从 MDN 官网上查询到。

动态伪类

动态伪类包含以下几个伪类，以 a 元素为例分别是：

a:link：未访问的连接
a:visted：已访问的连接
a:hover：鼠标放到链接上
a:active：激活的链接，鼠标在链接上长按不松开

使用伪类时需要注意：

:hover 必须是放在 :link 和 :visited 后面才有效
:active 必须放在 :hover 后面才能完全生效
建议的编写顺序为 :link :visited :hover :active

动态伪类指定让元素的不同的状态下设置 CSS 样式，除了 a 元素， :hover 和 :active 也可以作用在其他元素上

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 对 a 元素使用动态伪类，一定要注意伪类的顺序 */
    a:link {
      color:red;
    }
    a:visited {
      color: green;
    }
    a:hover {
      color: blue;
    }
    a:active {
      color: purple;
    }
  </style>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>
  <a href="http://www.bing.com">必应</a>
</body>
</html>

打开页面效果如下：

由于两个链接都没有访问过，也就是没被点击过，文本颜色为红色，一旦访问过之后就会变成绿色；

包括鼠标悬浮或者按住不放等不同的状态都会呈现 CSS 设置的颜色。

:focus 伪类指的是当前拥有输入焦点的元素，即能接收键盘的输入，如登录页面中输入文本框一聚焦就会变成红色；因为 a 元素可以在被键盘的 Tab 键选中，所以 :focus 伪类也可以作用于 a 元素。

加上 :focus 伪类，a 元素的伪类编写顺序建议为：:link :visited :focus :hover :active。

这种直接给元素的所有动态伪类都设置样式就相当于直接给 a 元素设置样式，当然分开设置可以给不同的状态设置不同的样式，或者直接设置，所有的状态都是一样的。

二、伪元素

伪元素可以创建一些不在文档树中的元素，并为其添加样式。就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

它可以用于设置元素的首字母、首行的样式在元素的内容之前或之后插入内容。

常用的伪元素有：

:first-line 或者 ::first-line：可以针对首行文本设置属性
:first-letter 或者 ::first-letter：可以针对首字母设置属性
:before 或者 ::before：在指定内容前插入其他内容
:after 或者 ::after：在指定内容后插入其他内容

为了区分伪类和伪元素，建议伪元素使用两个冒号的形式。

::first-line 或者 ::first-letter 常用于首行和首字母的设置；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 650px;
      background-color:#f00;
      color: whitesmoke;
    }

    /* 方式一：使用伪元素 ::first-line */
    .box::first-line {
      font-size: 30px;
      color: orange;
    }

    /* 方式二：也可以使用 span 元素 */
    /* .keyword {
      font-size: 30px;
      color: orange;
    } */
  </style>
</head>
<body>
  <div class="box">
    <span class="keyword">尼古拉．特斯拉Nikola Tesla（1856 -1943）。</span>1856年7月10日，他诞生于前南斯拉夫克罗地亚的斯米良，他父亲是一所教堂里的牧师，自小就在基督教的家庭里长大。1880年毕业于布 拉格大学后，于1884年移民美国成为美国公民，并获取耶鲁大学及哥伦比亚大学名誉博士学位。
  </div>
</body>
</html>

在浏览器中打开页面，效果如下：

当然这种效果我们也可以使用 span 元素来实现。

::before ::after 这两个伪元素使用的频率比较高，比如新闻的排名或者热情度等，都可以通过这两个伪元素来为内容前后增加样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .before {
      color: red;
    }

    .after {
      color: blue;
    }
    
    .box3::before {
      content: "伪序3"
    }

    .box3::after {
      content: "伪尾3"
    }

  </style>
</head>
<body>
  <div class="box1">
    <span class="before">序号1</span>
    内容1
    <span class="after">尾部1</span>
  </div>
  <div class="box2">
    <span class="before">序号2</span>
    内容2
    <span class="after">尾部2</span>
  </div>
  <div class="box3">内容3</div>
</body>
</html>

浏览器打开 HTML 页面，效果如下：

可以看到通过伪元素成功的在第三个 div 内容的前后插入指定的内容，除此之外我们还可以对插入的内容进行样式的设置，修改 CSS 代码：

    .box3::before {
      content: "伪序3";
      color:antiquewhite;
      font-size: 30px;
    }

    .box3::after {
      content: "伪尾3";
      color: aquamarine;
      font-size: 30px;
    }

再次打开该 HTML 页面

可以看到通过伪元素设置的内容已经被成功添加了样式，需要注意的是在使用伪元素的过程中，不要将 content 属性忽略，如果内容为空直接给空就可以，但是不能不写该属性。