为什么我的第一个子选择器不适用于具有指定类的选择中的第一个元素？

Question

我对@9​​87654321@的正确用法有点不知所措。

我有一个（动态生成的）元素，最终将包括：

<h1>
  <a>Foo</a>
  <a.trigger>Trigger A</a>
  <a.trigger>Trigger B</a>
  <span.bar>Bar</span>
</h1>

我需要设置trigger 链接的样式。这就是我正在做的：

.ui-collapsible-tabs.ui-dynamic-tabs .ui-collapsible-heading a.trigger {
  background: none repeat scroll 0 0 transparent;
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
  position: absolute;
  right: 2em;
  height: 100%;
  top: 0;
  width: 2em;
}
.ui-collapsible-tabs.ui-dynamic-tabs .ui-collapsible-heading a.trigger:first-child {
  right: 0;
  background-color: red !important;
  border-right: 1px solid red;
}

我已经尝试了a.trigger:first-child 和a.trigger:nth-of-type(1)，但我无法覆盖第一条规则设置的 CSS。两个选择器也有相同的特异性，所以这不是原因。

问题：
我想我错过了一些明显的东西......也许有人可以帮助我。谢谢！

Answer 1

:first-child 匹配其父级的第一个子级。你的第一个a.trigger 不是第一个孩子——那将是它之前的无类a。

:first-of-type 和 :nth-of-type(1) 是等价的，匹配其父元素中其类型的第一个元素。在这种情况下，您的无类 a 也是其父元素的第一个 a，使您的第一个 a.trigger 成为第二个 a 元素。

您的给定结构是如何始终生成动态元素的？如果是这样，您可以简单地选择a.trigger:nth-child(2) 而不是a.trigger:first-child：

.ui-collapsible-tabs.ui-dynamic-tabs .ui-collapsible-heading a.trigger:nth-child(2) {
  right: 0;
  background-color: red !important;
  border-right: 1px solid red;
}

或者你可以试试a + a.trigger:

.ui-collapsible-tabs.ui-dynamic-tabs .ui-collapsible-heading a + a.trigger {
  right: 0;
  background-color: red !important;
  border-right: 1px solid red;
}

（顺便说一句，!important 可能不需要。）

否则，如果您通常需要选择第一个 a.trigger，则需要以不同的方式对声明进行排序并稍微更改选择器：

.ui-collapsible-tabs.ui-dynamic-tabs .ui-collapsible-heading a.trigger {
  background: none repeat scroll 0 0 transparent;
  background-color: red !important;
  border: 0 none;
  border-right: 1px solid red;
  border-radius: 0;
  box-shadow: none;
  position: absolute;
  right: 0;
  height: 100%;
  top: 0;
  width: 2em;
}
.ui-collapsible-tabs.ui-dynamic-tabs .ui-collapsible-heading a.trigger + a.trigger {
  right: 2em;
  background-color: transparent;
  border-right: 0 none;
}

如果您的两个a.triggers 并不总是相邻，请将+ 替换为~。

here 详细介绍了通用解决方案。