CSS: первый в списке ul не работает

Question

Код

ul a:first-of-type {
  color: red;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li><a href="#">Item 3</a>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li><a href="#">Item 12</a>
  </li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>

Результат Скрипка

Почему a пункт 12 выбран? Это не первый родной брат в своем роде, это последний.

Answer 1

:first-of-typeотносится ктипу так, потому что aэто дитяli и, как вы можете видеть, больше нет aэлементы как братья и сестры в техli так что будет выбирать каждый first-of-type из a в пределах li

взгляните на этот фрагмент со знаком 2aбыть ребенкомliон выберет только первый a:

отрывок

ul a:first-of-type {
  color: red;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li><a href="#">Item 3a</a>
    <a href="#">Item 3b</a>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li><a href="#">Item 12</a>
  </li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>

Если вы хотите нацелиться только на пункт 3, вы можете использовать nth-of-typeнаli, как это:

отрывок

ul li:nth-of-type(3) a {
  color: red;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li><a href="#">Item 3</a>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li><a href="#">Item 12</a>
  </li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>