前端技术学习之选择器（四）

四，结构性伪类选择器：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;

}; */

section-1

第一部分内容

section-2

第二部分内容

section-3

第三部分内容

运行效果：