CSS3中结构伪类选择器——rootnotemptytarget选择器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3中结构伪类选择器——rootnotemptytarget选择器相关的知识,希望对你有一定的参考价值。

1.root选择器

将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素,在html页面中就是指包含整个页面的<html>部分。

<style type="text/css">

:root{

background:yellow;

}

body{

background:green;

}

</style>

注意:不使用root选择器来指定root元素的背景色,只指定body元素的背景色,则整个页面就全部变成了绿色。

 

2.not选择器

如果想对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式时,可以使用not选择器。

body*:not(h1){

    background:yellow;

}

 

3.empty选择器

适用empty选择器来指定当元素中内容为空白时使用的样式。

:empty{

    background:yellow;

}

 

4.target选择器

使用target选择器来对页面中某个target元素(该元素的id被当做页面的超链接来使用)指定样式,该样式只在用户点击了页面的超链接,并且跳转到target元素后起作用。

<style type="text/css">

:target{

    background:yellow;

}

</style>

<a href="#text1">文字1</a>

<div id="text1">

<h1>文字1</h1>

<p>此处省略100个字</p>

</div>

以上是关于CSS3中结构伪类选择器——rootnotemptytarget选择器的主要内容,如果未能解决你的问题,请参考以下文章

CSS3-选择器-结构化伪类

css3 伪类

html 5 的CSS3新增的伪类选择器还包括哪些?

CSS3 选择器

CSS3新增选择器

CSS动态伪类选择器温故-3