博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端技术学习之选择器(四)
阅读量:6758 次
发布时间:2019-06-26

本文共 1064 字,大约阅读时间需要 3 分钟。

hot3.png

四,结构性伪类选择器:

    :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>

 

运行效果:

转载于:https://my.oschina.net/u/2971691/blog/820932

你可能感兴趣的文章
三星S6D1121主控彩屏(240*320*18bit,262K)图形设备接口(GDI)实现
查看>>
head first java 01 ( 1 ~ 3 章 )
查看>>
Superhero.js – 构建大型 JavaScript 应用程序的最佳资源
查看>>
什么是UAT测试?
查看>>
FireDAC 下的 Sqlite [8] - 自定义函数
查看>>
Android 驱动测试程序H-M-S <2>
查看>>
Swift语言指南(七)--语言基础之布尔值和类型别名
查看>>
Hadoop 安装记录
查看>>
hdu 5206 Four Inages Strategy 判断是否是正方形
查看>>
Linq中使用Left Join
查看>>
HDFS Safemode问题
查看>>
GDI编程小结
查看>>
(C#基础) byte[] 之初始化, 赋值,转换。(转)
查看>>
mysql设置指定ip远程访问连接实例
查看>>
从js的repeat方法谈js字符串与数组的扩展方法
查看>>
IIS中添加MIME类型
查看>>
Restful风格wcf调用2——增删改查
查看>>
Kettle定时执行(ETL工具)【转】
查看>>
SQL Server里的闩锁介绍
查看>>
ARM Linux 3.x的设备树(Device Tree)
查看>>