伪元素就比较逆天,伪元素可以选择一个HTML元素的某一特定部分。
举例说明,伪元素可以:
伪元素的语法如下所示:
selector::pseudo-element { property:value; }
::first-line
和:first-line
都能实现作用,但是更推荐使用::first-line
伪元素。
::first-line
伪元素可以选择指定元素的文本的第一行。
p::first-line { color: red; }
::first-line伪元素只适用于block类型的元素。
以下这些属性适用于定义::first-line
伪元素:
::first-letter
伪元素可以选择指定元素的文本的第一个字符。
p::first-letter { color: red; }
::first-letter伪元素只适用于block类型的元素。
以下这些属性适用于定义::first-letter
伪元素:
活学活用,伪元素和Class类选择器的组合使用是一件天经地义的事情,不解释,看例子。(不仅仅是累选择器,伪元素和各种选择器的结合使用都是同样的道理,不解释)
p.jerk::first-letter { color: red; }
同时使用::first-letter和::first-line也是没问题的,而且::first-letter的默认优先级别比::first-line高,因此两者不管先后顺序,表现出的效果是一样的。
p::first-letter { color: Gray; font-size: xx-large; } p::first-line { color: Tomato; }
::before
伪元素可以在指定元素前插入内容。
h1::before { content: url(https://logo.zhuanfou.com/program-logo-60.png); }
::after
伪元素可以在指定元素后面插入内容。
h1::after { content: url(https://logo.zhuanfou.com/program-logo-60.png); }
::selection
伪元素可以设置选中文本的表现样式;如下几种CSS属性适合去定义::selection
伪元素指定的文本:color
、background
、cursor
和outline
;试试下面的例子吧,用鼠标选中文本来看看呗:
::selection { color: White; background: Tomato; }
大多情况下,都会为了考虑兼容Firefox浏览器而同时设置一下::-moz-selection伪元素,样式描述保持跟::selection伪元素一致就好啦!