前端技术学习之选择器(四)

四,结构性伪类选择器: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

第三部分内容

运行效果:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容