总结伪类与伪元素

1.伪类与伪元素.
先说一说为什么 css 要引入伪元素和伪类，以下是 章节中伪类和伪元素的描述：
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释：

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

2. 伪类与伪元素的区别
这里通过两个例子来说明两者的区别。

下面是一个简单的 html 列表片段：

<ul>
    <li>我是第一个</li>
    <li>我是第二个</li>
</ul>

如果想要给第一项添加样式，可以在为第一个

• 添加一个类，并在该类中定义对应样式：
  HTML:

• <ul>
      <li class="first-item">我是第一个</li>
      <li>我是第二个</li>
  </ul>
  

  :CSS:

  li.first-item {
      color: orange
  }
  

  下面是另一个简单的 html 段落片段：

  <p>Hello World, and wish you have a good day!</p>
  

  如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个 元素，并设置该 span 元素的样式：
  HTML:

  
  <p><span class="first">H</span>ello World, and wish you have a good day!</p>
  

  CSS:

  .first {
      font-size: 5em;
  }
  

  如果不创建一个 元素，我们可以通过设置

  的:first-letter 伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的 元素并添加了样式，但实际上文档树中并不存在这个 元素。
  HTML:

  <p>Hello World, and wish you have a good day!</p>
  

  CSS:

  
  p:first-letter {
      font-size: 5em;
  }
  

  从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

  3. 伪元素是使用单冒号还是双冒号？

  CSS3 规范中的要求使用双冒号 (:😃 表示伪元素，以此来区分伪元素和伪类，比如::before 和::after 等伪元素使用双冒号 (:😃，:hover 和:active 等伪类使用单冒号 (😃。除了一些低于 IE8 版本的浏览器外，大部分浏览器都支持伪元素的双冒号 (:😃 表示方法。

  然而，除了少部分伪元素，如::backdrop 必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after 也可以正确运行。

  对于伪元素是使用单冒号还是双冒号的问题，w3c 标准中的描述如下：
  Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

  大概的意思就是：虽然 CSS3 标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。

  实际上，伪元素使用单冒号还是双冒号很难说得清谁对谁错，你可以按照个人的喜好来选择某一种写法。

  4. 伪类与伪元素的具体用法
  这一章以含义解析和例子的方式列出大部分的伪类和伪元素的具体用法。下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图：
  
  
  某些伪类或伪元素仍然处于试验阶段，在使用前建议先在 Can I Use 等网站查一查其浏览器兼容性。处于试验阶段的伪类或伪元素会在标题中标注。

  伪类

  状态

  由于状态伪类的用法大家都十分熟悉，这里就不用例子说明了。

  1 :link

  选择未访问的链接

  2 :visited

  选择已访问的链接

  3 :hover

  选择鼠标指针浮动在其上的元素

  4 :active

  选择活动的链接

  5 :focus

  选择获取焦点的输入字段

  结构化

  1 :not

  一个否定伪类，用于匹配不符合参数选择器的元素。

  如下例，除了第一个

• 元素外，其他
• 元素的文本都会变为橙色。

• HTML:

  <ul>
      <li class="first-item">一些文本</li>
      <li>一些文本</li>
      <li>一些文本</li>
      <li>一些文本</li>
  </ul>
  

  CSS:

  
  1
  2
  3
  li:not(.first-item) {
      color: orange;
  }
  

  2 :first-child

  匹配元素的第一个子元素。

  如下例，第一个

• 元素的文本会变为橙色。

• HTML:

  <ul>
      <li>这里的文本是橙色的</li>
      <li>一些文本</li>
      <li>一些文本</li>
  </ul>
  

  CSS:

  li:first-child {
      color: orange;
  }
  

  3 : last-child
  匹配元素的最后一个子元素。
  如下例，最后一个

• 元素的文本会变为橙色。

• HTML:

  <ul>
      <li>一些文本</li>
      <li>一些文本</li>
      <li>这里的文本是橙色的</li>
  </ul>
  

  CSS:

  li:last-child {
      color: orange;
  }
  

  4 first-of-type
  匹配属于其父元素的首个特定类型的子元素的每个元素。

  如下例，第一个

• 元素和第一个 元素的文本会变为橙色。
  HTML:

• <ul>
      <li>这里的文本是橙色的</li>
      <li>一些文本 <span>这里的文本是橙色的</span></li>
      <li>一些文本</li>
  </ul>
  

  CSS:

  ul :last-of-type {
      color: orange;
  }
  

  6 :nth-child
  :nth-child 根据元素的位置匹配一个或者多个元素，它接受一个 an+b 形式的参数，an+b 匹配到的元素示例如下：

  1n+0，或 n，匹配每一个子元素。
  2n+0，或 2n，匹配位置为 2、4、6、8… 的子元素，该表达式与关键字 even 等价。
  2n+1 匹配位置为 1、3、5、7… 的子元素、该表达式与关键字 odd 等价。
  3n+4 匹配位置为 4、7、10、13… 的子元素。

  如下例，有以下 HTML 列表：

  <ol>
      <li>Alpha</li>
      <li>Beta</li>
      <li>Gamma</li>
      <li>Delta</li>
      <li>Epsilon</li>
      <li>Zeta</li>
      <li>Eta</li>
      <li>Theta</li>
      <li>Iota</li>
      <li>Kappa</li>
  </ol>
  

  CSS:

  ol :nth-child(2) {
      color: orange;
  }
  

  选择位置序号是 2 的倍数的元素，”Beta”, “Delta”, “Zeta”, “kappa” 会变成橙色:

  ol :nth-child(2n) {
      color: orange;
  }
  

  选择位置序号为偶数的元素：

  
  ol :nth-child(even) {
      color: orange;
  }
  

  选择从第 6 个开始，位置序号是 2 的倍数的元素，”Zeta”, “Theta”, “Kappa” 会变成橙色：

  ol :nth-child(2n+6) {
      color: orange;
  }
  

  9 :nth-last-type
  :nth-last-of-type 与 nth-of-type 相似，不同之处在于它是从最后一个子元素开始计数的。
  10 :only-child
  当元素是其父元素中唯一一个子元素时，:only-child 匹配该元素。

  HTML:

  ul>
      <li>这里的文本是橙色的</li>
  </ul>
   
  <ul>
      <li>一些文本</li>
      <li>一些文本</li>
  </ul>
  **CSS:**
  ul :only-child {
      color: orange;
  }
  **11 :only-of-type**
  当元素是其父元素中唯一一个特定类型的子元素时，:only-child 匹配该元素。
  
  如下例，第一个 ul 元素只有一个 li 类型的元素，该 li 元素的文本会变为橙色。**HTML:**
  
  

  HTML:

  <ul>
      <li>这里的文本是橙色的</li>
      <p>这里不是橙色</p>
  </ul>
   
  <ul>
      <li>一些文本</li>
      <li>一些文本</li>
  </ul>
  

  CSS:

  ul :only-child {
      color: orange;
  }
  

  11 :only-of-type
  当元素是其父元素中唯一一个特定类型的子元素时，:only-child 匹配该元素。

  如下例，第一个 ul 元素只有一个 li 类型的元素，该 li 元素的文本会变为橙色。

  HTML:

  <ul>
      <li>这里的文本是橙色的</li>
      <p>这里不是橙色</p>
  </ul>
   
  <ul>
      <li>一些文本</li>
      <li>一些文本</li>
  </ul>
  

  CSS:

  li:only-of-type {
      color: orange;
  }
  

  12 :target
  当 URL 带有锚名称，指向文档内某个具体的元素时，:target 匹配该元素。

  如下例，url 中的 target 命中 id 值为 target 的 article 元素，article 元素的背景会变为黄色。