四，结构性伪类选择器：empty
：empty选择器表示的就是空，用来选择没有任何内容的元素， 真的是什么内容都没有，空格都不能有。
举例：第一个<p>有文字内容，第二个<p>只有一个空格，第三个<p>为空。:empty就可以选中第三个<p>给它添加样式。
<style type="text/css">
p{
background-color: orange;
min-height: 30px;
}
:empty{
background-color: red;
}
</style>
<p>我是一个段落</p>
<p> </p>
<p></p>
运行效果：
五，结构性伪类选择器：target
：target为目标选择器，用来匹配相关URL指向的元素。：target是个很有意思的结构化伪类选择器，可以很轻松的实现点一个标题显示内容，而且还可以用#brand:target p{}这样配合选择target下的后代选择器。
代码例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>css手风琴效果</title>
<style type="text/css">
.accordion p{
display: none;
}
.accordion :target p{
display: block;
}
/*和下面这种写法是等价的*/
/*#section-1:target p,#section-2:target p,#section-3:target p{
display: block;
}; */
</style>
</head>
<body>
<div class="accordion">
<div id="section-1">
<h2>
<a href="#section-1">section-1</a>
</h2>
<p>第一部分内容</p>
</div>
<div id="section-2">
<h2>
<a href="#section-2">section-2</a>
</h2>
<p>第二部分内容</p>
</div>
<div id="section-3">
<h2>
<a href="#section-3">section-3</a>
</h2>
<p>第三部分内容</p>
</div>
</div>
</body>
</html>
运行效果：
扫一扫
970
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
