伪类与伪元素

时间 2019-11-10

标签元素繁體版

原文原文链接

1、伪类

伪类包含两种：状态伪类（UI 伪类）和结构性伪类。css

(1)状态伪类是基于元素当前状态进行选择的。

在与用户的交互过程当中元素的状态是动态变化的，所以该元素会根据其状态呈现不一样的样式。当元素处于某状态时会呈现该样式，而进入另外一状态后，该样式也会失去。css3

常见的状态伪类主要包括：segmentfault

:link 应用于未被访问过的连接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的连接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
:target 应用于连接点击后指向元素

前 4 个伪类的特指度相同，若是不按照这里列出的顺序使用它们，浏览器可能不会显示预期结果。为了好记，能够这么想：“LoVe? HA!”大写字母就是每一个伪类的头一个字母。浏览器

input:focus {border:1px solid blue;}

会在光标位于 input 字段中时，为该字段添加一个蓝色边框。这样可让用户明确
地知道输入的字符会出如今哪里。dom

<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.</h2> 
#more_info:target {background:#eee;}

会在用户单击连接转向 ID 为 more_info的元素时，为该元素添加浅灰色背景。post

(2)结构性伪类是css3新增选择器

利用dom树进行元素过滤，经过文档结构的互相关系来匹配元素，可以减小class和id属性的定义，使文档结构更简洁。设计

常见的包括：code

:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child() 选择某个元素的一个或多个特定的子元素；
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type() 选择指定的元素；
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择的元素是它的父元素的惟一一个子元素；
:only-of-type 选择一个元素是它的上级元素的惟一一个相同类型的子元素；
:empty 选择的元素里面没有任何内容。

2、伪元素

伪元素是对元素中的特定内容进行操做，而不是描述状态。它的操做层次比伪类更深一层，所以动态性比伪类低不少。实际上，伪元素就是选取某些元素前面或后面这种普通选择器没法完成的工做。控制的内容和元素是相同的，但它自己是基于元素的抽象，并不存在于文档结构中！orm

常见的伪元素选择器包括：文档

:first-letter 选择元素文本的第一个字（母）。
:first-line 选择元素文本的第一行。
:before 在元素内容的最前面添加新内容。
:after 在元素内容的最后面添加新内容。

3、注意

单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素，为了兼容某些浏览器，通常都采用单冒号

兼容性的问题，交给postcss去作。本文并未涉及兼容性的写法，包括前缀问题，能够交给autoprefixer去作。（这句话啥意思没懂，之后看看说的啥）

伪类（结构伪类）的效果能够经过添加一个实际的类来达到，而伪元素的效果则须要经过添加一个实际的元素才能达到，这也是为何他们一个称为伪类，一个称为伪元素的缘由。

4、伪元素的使用

（1）清除浮动

.clear:after {
content: '';
display: block;
clear: both;
}

(2) 画分割线

<style>
* {
  padding: 0;
  margin: 0;
}
.spliter::before, .spliter::after {
  content: '';
  display: inline-block;
  border-top: 1px solid black;
  width: 200px;
  margin: 5px;
}
  </style></head><body>
  <p class="spliter">分割线</p></body>

5、参考文献
http://www.javashuo.com/article/p-diaxzxtr-gu.html 详解 CSS 属性 - 伪类和伪元素的区别
http://www.javashuo.com/article/p-ufuvxcfm-cv.html 谈谈css伪类与伪元素《css设计指南》