伪类和伪元素极大地简化了我们的工作,例如,伪元素,一般网页布局中最脏最累的活儿都是交给它去干的。CSS3 新的伪类和伪元素模块不仅在结构上清晰明了,更丰富了选择器等。
结构伪类
CSS2 引入 first-child
之后,它一直都是唯一一个属于这种类型的伪类。但 CSS3 引入了 11 个新的结构伪类,极大地扩展了这一范围。
nth-*伪类
基本语法
nth-(这里使用 去替代若干不同的值)伪类的用法如下:
|
|
默认情况下,n 代表一个从 0 开始的数字,并以 1 递增(1,2,3,等等)。另一个整数可以作为乘数传递给它。例如,2n 就是代表 2 的倍数(2,4,6,等等),3n 就是 3 的倍数(3,6,9,等等),依次类推。下面是个示例:
|
|
除此之外,我们还可以使用数学运算符 +
和 -
,所以 2n+1 就是间隔奇数(1,3,5,等等)选中匹配的元素,3n-1 就是间隔 2,5,8… 选择匹配元素。
该选择符有两个特殊的关键字值可以使用,分别是
odd
: 等同于 2n+1,用于选中匹配元素的奇数项even
: 等同于 2n,用于选中匹配元素的偶数项
nth-child和nth-of-type
nth-child
在选择元素的时候,是以父元素中子元素的总数为基准,按照计数的位置进行选择;而 nth-of-type
则是仅仅只针对那些特定类型的子元素进行计数。下面是个示例:
nth-last-child和nth-last-of-type
nth-last-child
与 nth-last-of-type
伪类接受和 nth-child
与 nth-of-type
没什么大的区别,唯一的区别在于它们是从最后一个位置开始计数的。但是有一点儿需要注意,如果我们使用它们希望从后往前开始计数,那么我们就应该使用 -n 去替代 n。
|
|
first-of-type、first-child和last-child、last-of-type
first-child
和 last-child
比较好理解,即将样式规则应用到父元素的第一个子元素、最后一个子元素上。
而 first-of-type
与 last-of-type
像 nth-of-type
一样,它们所应用的元素,必须是其父元素的某种指定类型的第一个子元素。
|
|
only-child和only-of-type
这两种伪类常用于在文档树中选择这样的元素:该元素有一个父元素,但没有任何的兄弟元素(only-child)或者没有相同类型的兄弟元素(only-of-type)。
|
|
其他伪类
target
伪类能够在涉及的 URL 被使用的时候,把样式应用到指定元素上。如果要在 URL 被单击时把样式应用到元素上,可以使用1#my_id:target {}empty
伪类选择没有子元素(包括文本节点)的元素。root
伪类选择文档树中的第一个元素,它的唯一真正作用就是发生在为 XML 文档添加样式表的时候——在 HTML 中,root 永远是 html 元素。在 HTML 中使用root
也有一个小优点,就是可以用它为 html 元素赋予更高的特殊度,这在需要覆盖简单类型选择器的时候是很有用的。not
伪类在选择元素时,选择的是除了作为参数值给出的元素之外的所有元素。传入not
伪类的参数必须是一个简单的选择器——所以连接符(比如 + 和 -)以及伪类元素都不是有效的值。
UI元素状态伪类
UI元素状态伪类根据用户界面(UI)元素的状态进行选择。尽管 HTML5 提出了一系列的 UI 元素,但在 HTML 中,只有 form 元素能够拥有状态:
|
|
伪元素
CSS2 中共有四个伪元素,分别是
:first-line
:仅作用于块级元素,设置对象内的第一行的样式:first-letter
:仅作用于块级元素,设置对象内的第一个字符的样式:before
:在选中元素的子元素位置之前插入,必须设置content
属性值:after
:在选中元素的子元素位置之后插入,层叠顺序在 E::before 之下,必须设置content
属性值
CSS3 仅仅引入了两个新的伪元素:
::placeholder
: 用于设置对象文字占位符的样式(placeholder
是HTML5的表单新属性之一)::selection
:设置对象被选中时的样式,该伪元素只能定义被选择时的background-color
,color
和text-shadow
但是 CSS3 对原有伪元素的定义进行了优化,
像伪类一样,伪元素提供的也是在文档树中没有具体指明信息。但是在文档树中,伪类利用的是一些虚幻的条件,比如元素在文档树中的位置或元素的状态,而伪元素就更远了,它可以把样式应用到文档树中根本就不存在的元素上。
CSS3 引入了新的语法用于区分伪元素和伪类。在 CSS3 中,伪元素的前缀使用的是双冒号(::),不过为了保证向后兼容,浏览器依然支持单冒号的写法。