CSS3结构性伪类选择器

admin · 发表于 2015-12-30 18:25:40

在css3中，结构性伪类选择器的共同特征是允许开发者根据文档中的结构来指定元素的样式。
root：将样式绑定在页面的根元素中，根元素是指位于文档中最顶层的元素结构。指整个页面的html部分
not：如果想对某个结构元素使用样式，但是想排除这个结构样式下面的子结构元素，让他不使用当前这个样式,起排除的一个功能
empty：指定当前元素中内容为空白时，所使用的样式。
target：对页面中某个target元素指定样式，只在用户点击页面中的超链接，而且被跳转到target元素后才会起作用

如果使用了root,body只给内容区域添加样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3结构性伪类选择器</title>
<style>
:root {
background-color: #ccc;
}
body {
background-color: darkgreen;
}
div *:not(h1) {
color: #ff0000;
}
:empty {
background-color: darkviolet;
}
:target {
background-color: orange;
}
</style>
</head>
<body>
<div>
<h2>你好么？</h2>
<h1>这里是标题</h1>
这里是一个p标签
<table border="1">
<tr>
<td>内容1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>内容2</td>
</tr>
</table>
<a href="#a1">菜单1</a>|
<a href="#a2">菜单2</a>|
<a href="#a3">菜单3</a>|
<a href="#a4">菜单4</a>|
<div id="a1">
<h1>菜单1</h1>
菜单1内容
</div>
<div id="a2">
<h1>菜单2</h1>
菜单2内容
</div>
<div id="a3">
<h1>菜单3</h1>
菜单3内容
</div>
<div id="a4">
<h1>菜单4</h1>
菜单4内容
</div>
</div>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

CSS3结构性伪类选择器

相关帖子

众神之神