如何解决有没有办法指定第一个元素* type *?
| 我想知道有什么方法可以使下面的CSS示例正常工作吗?<!DOCTYPE html>
<html>
<head>
<style type=\"text/css\">
.col p:first-child {
background:yellow;
}
</style>
</head>
<body>
<div class=\"col\">
<h1>Woot</h1>
<p>I am a super nun. I am a super nun.</p>
<p>I am a super nun. I am a super nun.</p>
</div>
</body>
</html>
基本上,我需要以某种方式设置元素的第一个<p>
样式,但是即使它是第二个孩子(duh),ѭ2 attempt也不起作用,即使我试图说:\“第一个<p>
元素在父母(例如.col p:first-child
)中”。
是否可以选择CSS中特定类型的第一个孩子而不是第一个孩子?
解决方法
幸运的是,对于元素类型,CSS3提供了
:first-of-type
伪类(没有类的第一个,伪类的第一个,具有特定属性的第一个,等等)。
.col > p:first-of-type
不幸的是,由于它是CSS3选择器,因此浏览器对它的支持非常差。在所有IE版本中,只有IE9支持它。
例如,如果.col
的结构是可预测的(足够),例如,它总是包含一个元素,后跟一个p
,则可以只使用CSS2选择器来做类似的事情:
.col > :first-child + p
,那将是“ 5”伪类。
:first-of-type
伪类表示一个元素,该元素是其类型在其父元素的子元素列表中的第一个同级。
现在,我只需要查看它的支持程度。
这是您要查找的quirksmode兼容性表。简短版本:忘记IE <9。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。