2

我对正确使用first-child.

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

<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。两个选择器也具有相同的特异性，因此这不是原因。

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

4

1 回答 1

4

: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 并不总是相邻，请替换+为~.

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

于 2013-09-02T17:11:12.303 回答