css3选择器和伪类[重复]

Question

请解释为什么在某些情况下伪类与 CSS 选择器一起工作而有时不工作。

守则 (https://jsfiddle.net/aspanoz/m1sg4496/)：

 
div.wrapper {
  margin-bottom: 10px
}
div[class*="myclass"]:not(:first-of-type) {
  color: green
}
div[class*="myclass"]:first-of-type {
  color: red
}

<div class="wrapper">
  <div class="myclass">This text should appear red.</div>
  <div class="myclass">This text should appear green.</div>
  <div class="myclass">This text should appear green.</div>
  <div>this :first-of-type working as exepted</div>
</div>
<div class="wrapper">
  <div>but this :first-of-type fail</div>
  <div class="myclass">This text should appear red.</div>
  <div class="myclass">This text should appear green.</div>
  <div class="myclass">This text should appear green.</div>
</div>

Answer 1

:first-of-type 伪类名称中的单词“type”指的是标签类型（即标签name），而不是它前面的选择器。

官方定义（来自Selectors Level 3）是：

与:nth-of-type(1) 相同。 :first-of-type 伪类表示一个元素，它是其父元素的子元素列表中其类型的第一个兄弟元素。

这是您选择的选择器。

div[class*="myclass"]:first-of-type

此代码选择满足两个以下条件的元素。

1. class 属性必须包含“myclass”，并且
2. 它必须是其容器中的第一个 div 元素。

在您的第二个示例中，此选择器导致查找失败，因为没有符合这两个条件的元素。

存在一些 CSS hack，它只能选择与您的选择器匹配的第一个元素。我这里的代码基于this very thorough answer。这取决于general sibling selector 和CSS specificity 的性质。

div.wrapper {
  margin-bottom: 10px
}

/* first select all of your items */
div[class*="myclass"] {
  /* apply the "special" styling here */
  color: red;
}

/* use general sibling selector to grab all except the first */
div[class*="myclass"] ~ div[class*="myclass"] {
  /* "undo" your style on these */
  color: green;
}

<div class="wrapper">
  <div>This text is unaffected.</div>
  <div class="myclass">This text should appear red.</div>
  <div class="myclass">This text should appear green.</div>
  <div class="myclass">This text should appear green.</div>
</div>

<div class="wrapper">
  <div class="myclass">This text should appear red.</div>
  <div class="myclass">This text should appear green.</div>
  <div class="myclass">This text should appear green.</div>
  <div>This text is unaffected.</div>
</div>

<div class="wrapper">
  <div class="myclass">This text should appear red.</div>
  <div class="myclass">This text should appear green.</div>
  <div>This text is unaffected.</div>
  <div class="myclass">This text should appear green.</div>
</div>

Answer 2

如下：

div[class*="myclass"]:first-of-type {
  color: red
}

<div class="wrapper">
  <div>but this :first-of-type fail</div>
  <div class="myclass1">This text should appear red.</div>
  <div class="myclass1">This text should appear green.</div>
  <div class="myclass1">This text should appear green.</div>
</div>

您是在告诉浏览器查找div，其中：

i) 是第一个div； 和

ii) 有一个以myclass 开头的类。

第一个 div 是没有 .myclass1 的那个 - 因此，它不是红色的。

.myclass1 的第一次出现在 第二个 div - 要正确选择该 div，您需要使用：

div[class*="myclass"]:nth-of-type(2)

---

为什么:first-of-type 不起作用？

type 仅指元素的类型。

您正在寻找的是:first-of-query。

到目前为止，:first-of-query 还不存在。