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

在以下内容中：

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) 有一个 class 以 myclass 开头。

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

.myclass1第一次出现是在第二个div - select那个div正确，你' d 需要使用：

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

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

type仅指类型的元素。

您要查找的是:first-of-query。

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

Answer 2

:first-of-type伪class名称中的"type"字是指标签类型（即标签名称），不是 select 或它之前的

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

Same as :nth-of-type(1). The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element.

这是select或者你选择的。

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

此代码selects 元素满足两个以下条件。

class 属性必须包含 "myclass" 和
它必须是其容器中的第一个 div 元素。

在你的第二个例子中，这个 selector 导致找不到，因为没有元素同时满足这两个条件。

存在一些 CSS 技巧，它可以 select 仅匹配您的 selector 的第一个元素。我这里的代码是基于 this very thorough answer. It depends on the general sibling selector and the nature of 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>

css3 选择器和伪类

css3 selectors and pseudo-classes

css

css-selectors

pseudo-class

css3 选择器和伪 类

css3 selectors and pseudo-classes

css

css-selectors

pseudo-class

css3 选择器和伪类