四,结构性伪类选择器:
:empty选择器表示的就是空,用来选择没有任何内容的元素, 真的是什么内容都没有,空格都不能有。
举例:第一个<p>有文字内容,第二个<p>只有一个空格,第三个<p>为空。:就可以选中第三个<p>给它添加样式。
<style type="text/css">
p{
background-color: orange;
min-height: 30px;
}
:empty{
background-color: red;
}
</style>
<p>我是一个段落</p>
<p> </p>
<p></p>
运行效果:
五,结构性伪类选择器: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>
运行效果: