Question

我正在尝试将一个类的第一个实例作为目标。

.ContactPage-details div > .ContactPage-title ~ .ContactPage-title:not(:first-child) {
	background: none;
}

.ContactPage-details div > .ContactPage-title {
    background: red;
    color: white;
}

<div class="ContactPage-details">
  <div class="ContactPage-telephone">
    <h3 class="ContactPage-title">The First paragraph.</h3>
  </div>
  <div class="ContactPage-emailAddress">
    <h3 class="ContactPage-title">The Second paragraph.</h3>
  </div>
  <div class="ContactPage-address">
    <h3 class="ContactPage-title">The Third paragraph.</h3>
  </div>
</div>

我正在尝试定位<h3 class="ContactPage-title">The First paragraph.</h3>

第一个h3父级可以更改，它不一定总是.ContactPage-telephone，所以我不能直接针对它，因为它会因数据库中是否列出电话号码而异。

这是我当前要尝试定位ContactPage-title的第一个实例的CSS

目前，所有h3的背景都是红色，白色。

有没有一种方法可以在不使用JavaScript的情况下定位ContactPage-title的第一个实例？

Answer 1

回答您对问题的描述：

不。 CSS具有:first-child和:first-of-type，但没有:first-of-class。

但是，您的示例代码使您看起来像实际上是要定位作为块中第一个孩子的孩子的.ContactPage-title。

那将是：

.ContactPage-details > :first-child > .ContactPage-title {}

块中类的第一个实例的CSS选择器

1 个答案: