Question

我有一个包含2个可能类别的标签列表：P1和P2。我想将CSS应用于每个类的第一项。它在我的项目和fiddle

中都不起作用

为什么？

.A>.B>.C>.P1:first-child {
  font-weight: bold;
}

.A>.B>.C>.P2:first-child {
  font-style: italic;
}

;

<div class="A">
  <div class="B">
    <div class="C">
      <p class='P1'>
        "JAJA P1"
      </p>
      <p class='P1'>
        "JAJA P1"
      </p>
      <p class='P2'>
        "JAJA P2"
      </p>
      <p class='P2'>
        "JAJA P2"
      </p>
    </div>
  </div>
</div>

Answer 1

:first-child表示＆＃34;元素是其父元素＆＃34;中的第一个子元素。它并不意味着＆＃34;元素是其父元素中的第一个子元素，与其他条件相匹配＆＃34;。

虽然存在:first-of-type伪类，但没有:first-of-class伪类。 CSS并不直接支持您想要实现的目标。

您可以使用general sibling combinator来关闭，并支持您要设置的特定属性。

.p2 { font-style: italic; }
.p2 ~ .p2 { font-style: normal; }

将 all 匹配的元素设置为斜体，然后将后续的元素设置为非斜体。

Answer 2

:first-child是一个元素选择器，所以你不能用它来选择每个类的第一个 - 它只是用于选择父元素的第一个子元素。

相反，您可以尝试以下技巧：

使用您的第一个孩子风格设置所有课程
从兄弟姐妹中移除该风格

.C>.P1 {
  font-weight: bold;
}

.C>.P1~.P1 {
  font-weight: normal;
}

.C>.P2 {
  font-style: italic;
}

.C>.P2~.P2 {
  font-style: normal;
}

<div class="A">
  <div class="B">
    <div class="C">
      <p class='P1'>
        "JAJA P1"
      </p>
      <p class='P1'>
        "JAJA P1"
      </p>
      <p class='P2'>
        "JAJA P2"
      </p>
      <p class='P2'>
        "JAJA P2"
      </p>
    </div>
  </div>
</div>

Answer 3

这是因为您使用>选择器。它选择直系孩子

CSS '>' selector; what is it?

这将按你的意愿工作：

.A .P1:first-child {
  font-weight: bold;
}
.A .P2:first-child {
  font-style: italic;
};

Answer 4

你可以选择简单的方法（奇数） https://jsfiddle.net/ob0y953n/13/

更多可以阅读＆＃34;：nth-child＆＃34; here

＆＃13;

 .A p:nth-child(odd) {
        color: #fff;
        background-color: grey; }

＆＃13;

<div class="A">
  <div class="B">
    <div class="C">
      <p class='P1'>
        "Selected"
      </p>
      <p class='P1'>
        "Not Selected"
      </p>
      <p class='P2'>
        "Selected"
      </p>
      <p class='P2'>
        "Not Selected"
      </p>
    </div>
  </div>
</div>

＆＃13;

Answer 5

此方法无法选择.P2也是第一个孩子， '：第一个孩子'选择他的父亲，然后选择'第一个孩子'。所以你的.P2：第一个孩子意味着.P2他的父亲和他的食客的'第一个孩子'它是P1但它不是.P2如此未使用。你应该改用其他方法。

CSS：定位每个类的第一个对象

5 个答案: