首页 > 代码库 > CSS3中结构伪类选择器——root、not、empty、target选择器
CSS3中结构伪类选择器——root、not、empty、target选择器
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="http://www.mamicode.com/#text1">文字1</a>
<div id="text1">
<h1>文字1</h1>
<p>此处省略100个字</p>
</div>
CSS3中结构伪类选择器——root、not、empty、target选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。