结构性伪类选择器

来源：互联网发布：烘焙食谱软件编辑：程序博客网时间：2024/05/01 21:38

结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式。
root选择器将样式捆绑到页面的根元素中。所谓根元素是指位于文档结构中最顶层的元素。在HTML页面中，就是指包含整个页面的<html>部分

如可用以下片段将整个网页的背景设为黄色，将网页中的body元素背景设为红色。
:root{background-color:yellow;}
body{background-color:red;}

not选择器如果想对某个结构元素使用样式，但又想排除该结构元素下面的子结构元素，让它不使用该样式时，就可以使用not选择器了。
示例：
body *: not(h2){
background-color:red;
}

empty选择器用来指定当前元素内容为空白是使用的样式。
:empty{background:yellow;}

target选择器该选择器用来对页面中某个target元素（该元素的id被当作页面中的超链接来使用）指定样式，该样式只有在用户单击了页面中的超链接，并且跳转到target元素后起作用。
:target{background:yellow;}

子元素伪类选择器是指能特殊针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个、第奇数个子元素进行样式设置。此类的选择器包括first-child、last-child、nth-child以及nth-last-child4个。
如指定第一个子元素和最后一个子元素样式

li:first-child{background-color:#ffb90f;}
li:last-child{background-color:#caff70;}

如果页面中具有多个ul列表，则该first-child选择器与last-child选择器对所有ul列表都适用。

另外一些例子：
//所有正数下第奇数个子元素
nth-child(odd){
...
}
nth-child(even){
...
}
//所有正数下倒数第奇数个子元素
nth-last-child(odd){
...
}
//所有正数下倒数第偶数个子元素
nth-last-child(even){
...
}

对同类型的第奇数个或者第偶数个子元素使用样式可使用nth-of-type和nth-last-child两个选择器。

0 0