Question

我想知道有没有办法让以下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），first-child不起作用，即使我试图说：“父级中的第一个<p>元素（即.col p:first-child）”。

可以在CSS中选择不是第一个孩子，而是选择特定类型的第一个孩子吗？

Answer 1

幸运的是，对于元素类型，CSS3提供了:first-of-type伪类（没有第一个类，第一个是伪类，第一个是某个属性，等等）。

.col > p:first-of-type

不幸的是，由于它是一个CSS3选择器，浏览器对它的支持非常差。在所有IE版本中，只有IE9支持它。

如果.col的结构是可预测的（足够），例如，它总是包含一个元素后跟一个p，那么你可以用CSS2选择器来做这样的事情：

.col > :first-child + p

Answer 2

那将是:first-of-type伪类。

:first-of-type伪类表示一个元素，它是其父元素子元素列表中第一个兄弟元素。

现在我只需要了解它的支持情况。

Here's您正在寻找的quirksmode兼容性表。简短版本：忘记IE＆lt; 9。

有没有办法指定第一个元素类型？

2 个答案:

有没有办法指定第一个元素*类型*？

2 个答案:

有没有办法指定第一个元素类型？