在这打字。
div >
则不会被认为是空,因此与选择器不匹配。
选择空元素对于隐藏这些元素很有用,因为如果它们有填充,它们可能是奇怪的垂直和/或水平空白区域的原因。它对于在不再需要或有用空元素的动态环境中删除空元素也很有用。例:
/ *选择并隐藏页面上的所有元素* /
* :empty {
display:none;
}
/ *选择并隐藏所有空段落* /
p :empty {
display:none;
}
/ *选择并隐藏所有空的菜单项* /
nav a :empty {
display:none;
}
/ *选择表中的空表格单元格并对其应用背景颜色* /
td :empty {
background-color:#eee ;
}
说明:
1、由伪元素::before,::after生成的内容并不算作“真实”内容,即使它们存在于元素内部,也不会影响元素之间的空白。
2、元素内的空格和空子元素计为该元素内的字符信息,因此如果元素包含两个元素中的一个,则该元素不再被视为空。例如,以下两个元素不被视为空:
p > <! - 包含一个空格 - >
span > p > <! - 包含一个空元素 - >
3、由于空格被视为内容,因此打开但未关闭的元素标记也不会为空。例如:
4、如果开始标记后面紧跟另一个标记,则它再次被视为空。
内容...... p >
5、如果一个开放标记后跟另一个未直接跟随另一个标记的开放标记,则第一个标记被认为是空的,而第二个标记则不是(因为空白)。例如:
6、自闭合元件,例如
,
,和
等都会被认为是空的,并且将和:empty选择器匹配。
下面我们通过简单的示例来看看:empty的使用:
示例演示:把亚麻色背景应用于空段落
html代码:
测试,测试,测试,测试,测试,测试,测试,测试,测试。
测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试!
css代码:
.container {
margin: 40px auto;
max-width: 700px;
}
p:empty {
background-color: linen;
padding: 15px;
}
.pseudo::before {
content: "::before添加内容";
}
效果图:
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。
以上就是:empty是什么?怎么使用?的详细内容,更多请关注 第一PHP社区 其它相关文章!