Heim > Artikel > Web-Frontend > CSS伪类伪元素_html/css_WEB-ITnose
CSS伪类伪元素_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:49:141665Durchsuche
CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。
先介绍一下伪类和伪元素有什么区别？其实这是个纯概念上的问题，就算不理解也不影响实际的使用。但作为一个CSSer，概念这种东西有时候就像地基，地基越牢固，将来大厦也越坚挺。
伪类就是给既存的元素模拟新添加一个类来实现某种效果。伪元素就是模拟新添加一个元素来实现某种效果。不明白？举个例子就明白了。
用伪类:first-child将第一个p设成红色：
p:first-child {color: red}<div> <p>第一个段落</p> //我将变成红色 <p>第二个段落</p></div> 等价于手动给DOM元素添加类：
.first-child {color: red}<div> <p class="first-child">第一个段落</p> <p>第二个段落</p></div> 那伪元素呢？用伪元素::first-letter给第一个字设成红色：
p::first-letter {color: red}<div> <p>第一个段落</p> <p>第二个段落</p></div> 如果不用伪元素，你需要多加一个元素（如span）这样来实现：
.first-letter {color: red}<div> <p><span class="first-letter">第</span>一个段落</p> <p>第二个段落</p></div> 再回过头感受一下：伪类就是给既存的元素模拟新添加一个类来实现某种效果。伪元素就是模拟新添加一个元素来实现某种效果。现在我们来看看具体有哪些伪类和伪元素。
伪类：
可细分6类：动态，UI元素状态，目标，语言，结构，否定
动态伪类选择器：:link，:visited，:hover，:active，:focus。非常常用，从名字就能开出用途（事实上所有伪类选择器从名字上都能看出用途），具体就不赘述了。太基础的东西还是自行参考W3C吧
UI元素状态伪类选择器：:checked，:enabled，:disabled。常用且简单，不赘述。
目标伪类选择器：:target用来获取锚点#部分。页面实现跳转定位很多都是使用a标签的锚点来来定位。其实背后的原理是a标签的href属性能改变浏览器的location.hash，让页面在有滚动条的前提下实现页面内跳转。:target的作用就是获取跳转的目标元素，如下可以获取到id为logo的div：
<div id="logo"> …</div><a href="#logo">jump to logo</a>
语言伪类选择器：:lang根据lang属性匹配元素，如
<html lang="en"> //可在html标签上设，也可以<body lang="en">标签里设:lang(en) { …… } //根据页面的不同的语言（如英语和法语）对不同DOM元素进行处理:lang(fr) { …… } 结构伪类选择器：:first-child，:last-child，:nth-child(n)，:nth-last-child(n)，:nth-of-type(n)，:nth-last-of-type(n)，:first-of-type，:last-of-type，:only-child，:only-of-type，:root，:empty。
:first-child看名字就知道了，第一个孩子。等同于:nth-child(1)。
:last-child看名字就知道了，最后一个孩子。等同于:nth-last-child(1)。
:nth-child(n)该标签是某类型，并且是父标签里第n个孩子。反之:nth-last-child就是倒数第n个孩子。
:nth-of-type(n)父标签里第n个某类型的孩子。反之:nth-last-of-type父标签里倒数第n个某类型的孩子。
:nth-child(n)和:nth-of-type(n)这两个伪类的参数n从0开始，你可以写出任意喜欢（奇葩）的公式，如n+4，-n+6，3n-2等，当结果值等于或小于0时直接被无视掉。当然最常用的还是奇数2n+1和偶数2n，因此有两个关键词odd和even。那它俩的差异在哪里呢？
例如div下有两个p，我们想将第二个p变成红色，用p:nth-child(2) { color: red; }和p:nth-of-type(2) { color: red; }都可以。但意义是不同的，前者表示该标签是p且是父标签里第二个孩子。后者表示父标签里第二个p。
现在把DOM结构变一下：div下依次有一个a，两个p。我们想将第二个p成红色，用p:nth-child(2) { color: red; }就不对了，会将第一个p（因为该标签是p且是父元素的第二个孩子）设成红色。用p:nth-of-type(2) { color: red; }才能将第二个p设成红色。
:first-of-type，:last-of-type同理可知就是父标签里第一个/最后一个某类型的孩子。等同于:nth-of-type(1)，:nth-last-of-type(1)。
:only-child父标签里仅有一个孩子。
:only-of-type父标签里唯一一个该类型的孩子。有什么用呢？例如当div里只有一张img时不浮动。当div里有多张img时，让它们从左至右依次浮动显示。你可以用div > img:only-of-type {…}，来控制当div里只有一张图片和不止一张图片时采用不同的布局
:root匹配根元素，HTML中根元素始终是html，等同于基本选择器html
:empty表示当元素里面什么都没有的时候（包括空格、标签内换行）应用相关样式，常用于高亮提示用户搜索的结果为空。例如.xx:empty { background-color: red; }，div里无内容时背景色成红色。div里有内容时无背景色。但要注意伪元素不算内容，如.xx::after { content: 'hello'; }，此时div里显示字但背景色仍旧是红色。想想也知道::before，::after是伪元素，不是真实元素，因此不会影响:empty判断。而且因为伪元素不在DOM树内，你无法取得::before, ::after伪元素生成的content。
否定伪类选择器：:not，例如不hover时显示某效果li:not(:hover)。
伪元素
用于定位文档中包含的文本，但无法在DOM树中定位。有::first-line，::first-letter，::before，::after，::selection（CSS3之前是一个冒号，CSS3后变成两个冒号，用于和伪类区分开）
::first-line，::first-letter分别是首行和首字母
::before，::after相当于在元素内部插入两个额外的标签，最适合也是最推荐的应用就是图形生成
::selection用于匹配选中的文本（注意Firefox下是::-moz-selection）。该伪元素只接受两个属性background和color