伪类与伪元素

ChanceWong 发布于2019-08-30 15:55 / 2983人阅读

摘要：一伪类伪类包含两种状态伪类伪类和结构性伪类。状态伪类是基于元素当前状态进行选择的。二伪元素伪元素是对元素中的特定内容进行操作，而不是描述状态。

一、伪类

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

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

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

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

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

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

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

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

More Information
This is the information you are looking for. 
#more_info:target {background:#eee;}

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

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

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

常见的包括：

: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 选择的元素里面没有任何内容。

二、伪元素

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

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

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

三、注意

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

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

伪类（结构伪类）的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

四、伪元素的使用 （1）清除浮动

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

(2) 画分割线

分割线

五、参考文献
https://segmentfault.com/a/1190000000484493 详解 CSS 属性 - 伪类和伪元素的区别
https://segmentfault.com/a/1190000012156828 谈谈css伪类与伪元素
《css设计指南》

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117285.html

伪类与伪元素

摘要：介绍伪类和伪元素是中很常见的两个概念，利用的好，能够很方便的实现一些特殊效果。伪类与伪元素由于用法相近，导致平时使用并不能很好的区分这两个概念。伪类伪类类似于，用于对已有元素增加特殊状态，比如等。伪元素伪元素包括。介绍伪类和伪元素是css中很常见的两个概念，利用的好，能够很方便的实现一些特殊效果。伪类与伪元素由于用法相近，导致平时使用并不能很好的区分这两个概念。伪类（pseudo-...

kamushin233 2019-08-28 18:30 评论0 收藏0
总结常用伪类与伪元素

摘要：总结常用伪类与伪元素伪类和伪元素是为了格式化树以外的信息而被引入的。伪类一个伪类是以一个冒号作为前缀，被添加到一个选择器末尾的关键字，可以让指定的元素在特定的状态呈现指定的样式。总结常用伪类与伪元素伪类和伪元素是为了格式化 DOM 树以外的信息而被引入的。伪类一个 CSS 伪类是以一个冒号(:)作为前缀，被添加到一个选择器末尾的关键字，可以让指定的元素在特定的状态呈现指定的样式...

anRui 2019-08-30 10:50 评论0 收藏0
谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

Berwin 2019-08-01 18:04 评论0 收藏0
谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

hedzr 2019-08-29 13:53 评论0 收藏0