四,结构性伪类选择器:empty
:empty选择器表示的就是空,用来选择没有任何内容的元素, 真的是什么内容都没有,空格都不能有。
举例:第一个
有文字内容,第二个
只有一个空格,第三个
为空。:empty就可以选中第三个
给它添加样式。
p{
background-color: orange;
min-height: 30px;
}
:empty{
background-color: red;
}
我是一个段落
运行效果:
五,结构性伪类选择器:target
:target为目标选择器,用来匹配相关URL指向的元素。:target是个很有意思的结构化伪类选择器,可以很轻松的实现点一个标题显示内容,而且还可以用#brand:target p{}这样配合选择target下的后代选择器。
代码例子:
css手风琴效果
.accordion p{
display: none;
}
.accordion :target p{
display: block;
}
/*和下面这种写法是等价的*/
/*#section-1:target p,#section-2:target p,#section-3:target p{
display: block;
}; */
第一部分内容
第二部分内容
第三部分内容
运行效果: