Question

请解释为什么在某些情况下，与CSS-selectors结合使用的伪类有效，有时则无效。

代码（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

此代码选择符合以下条件的两个的元素。

class属性必须包含“myclass”和
它必须是其容器中的第一个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不存在。

css3选择器和伪类

2 个答案: