html - 最初の子セレクターが、指定されたクラスのセレクションの最初の要素で機能しないのはなぜですか?

Question

の正しい使い方がちょっとわかりません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 をオーバーライドできません。どちらのセレクターも同じ特異性を持っているため、それが理由になることはありません。

質問:
明らかな何かが欠けていると思います...誰かが私を助けてくれるかもしれません. ありがとう！