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