CSS伪类伪元素

9 May

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)就是倒数第n个孩子。

:nth-of-type(n)父标签里第n个某类型的孩子。反之:nth-last-of-type(n)父标签里倒数第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>第二个段落</p>
</div>

我们想将第二个p变成红色,用p:nth-child(2) { color: red; }和p:nth-of-type(2) { color: red; }都可以。但意义是不同的,前者表示该标签是p且是父标签里第二个孩子。后者表示父标签里第二个p。

现在把DOM结构变一下:

<div>
  <div>我是第一个孩子</div>
  <p>第一个段落</p>
  <p>第二个段落</p>
</div >

我们想将第二个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)。

伪类结合起来用能发挥更强大的作用。例如常见的渐进式需求,当列表项少于5项时用显示预览行文字,当列表项多于5项时用不显示预览行文字。这样条目少时,增加预览行文字便于用户预览,且让页面不显得非常空。条目多时,不显示预览行,让用户更多地关注条目名,便于用户选取。你如何处理呢?

先无脑对li应用上显示预览行的式样。然后用li:nth-child(5),可惜它只能选中第5项,而我们想要的是当数量>=5时,所有li都应用隐藏预览行文字的式样。就算改成li:nth-child(5) ~ li也不对,它将第5个及之后的li应用上了新式样,前4个仍旧是旧的式样,等同于li:nth-child(n+5)。由于没有“回头看”的方式,你可能放弃CSS而用JS来处理。

其实CSS是有技巧能实现“回头看”的。当列表项数量为5时是临界点。因此当数量正好为5时,取第1项,再选中第1项之后的所有项即可:

li:first-child:nth-last-child(5),
li:first-child:nth-last-child(5) ~ li { 
    ... 
}

如果没明白,再解释一下上面的代码。第一行表示第一个元素是从后往前数的第5个元素。第二行是当数量逐渐增加到5时,选中从第一个元素之后的所有元素。

伪元素

用于定位文档中包含的文本,但无法在DOM树中定位。有::first-line::first-letter::before::after::selection(CSS3之前是一个冒号,CSS3后变成两个冒号,用于和伪类区分开)

::first-line::first-letter分别是首行和首字母

::before::after相当于在元素内部插入两个额外的标签,最适合也是最推荐的应用就是图形生成

::selection用于匹配选中的文本(注意Firefox下是::-moz-selection)。该伪元素只接受两个属性background和color

Leave a Reply

Your email address will not be published. Required fields are marked *