CSS中伪类和伪元素是什么-创新互联

小编给大家分享一下CSS中伪类和伪元素是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联是一家集网站建设,麻山企业网站建设,麻山品牌网站建设,网站定制,麻山网站建设报价,网络营销,网络优化,麻山网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

一、伪类

伪类包含两种：状态伪类（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) 画分割线

  
分割线

以上是“CSS中伪类和伪元素是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：CSS中伪类和伪元素是什么-创新互联
标题路径：http://cxhlcq.com/article/dcpcce.html