Как оформить каждую первую букву в абзаце, который не является ссылкой

Question

В настоящее время я оформляю каждую первую букву абзаца, который следует за заголовком 3, со следующим кодом, чтобы они выделялись:

.someClass h3+p:first-letter{
    font-size: 2em;
}

Теперь я хочу исключить все ссылки ("a"-теги) из выбора.Я посмотрел в селектор .not (), но

.someClass h3+p:not(a):first-letter{
    font-size: 2em;
}

не работает.

Любые предложения будут оценены!Спасибо.

Answer 1

Давайте отладим, разобрав ваш текущий селектор на английском языке: .someClass h3+p:not(a):first-letter

• .someClass h3 - выберите элемент h3 внутри .someClass element
• .someClass h3+p - выберитеэлемент p сразу после h3 внутри .someClass
• .someClass h3+p:not(a) - выберите элемент p, который не является якорным элементом -

Мы можем остановиться прямо здесь - a <p>элемент никогда не будет <a>, потому что элемент не может иметь несколько тегов.Поскольку вы на самом деле пытаетесь повлиять на <a> ВНУТРИ <p>, селектор :not() здесь не применим.

К счастью, есть другое решение - немного нестандартное: если вы меняете проблемные элементы <a>, которые начинаются с <p>, чтобы стать элементами уровня блока (используяdisplay: inline-block (для сохранения намеченного макета), на них больше не повлияет правило first-letter их родителей.

Вот как это работает:

.someClass h3+p:first-letter {
  font-size: 2em;
}

.someClass h3+p a:first-child {
  display: inline-block;
}

<div class="someClass">
  <h3>H3</h3>
  <p>Paragraph Text</p>

  <h3>H3</h3>
  <p><a href="#">Paragraph</a> Text</p>
</div>