Как выбрать конкретный текст из разметки для применения CSS?

Question

В следующем примере, как я могу применить CSS-стили к тексту THIS внутри тега p, не применяя CSS к тегу span?

<p>
    <span class='x' id='1'><a href='#'>y</a>.</span>
    THIS
</p>

Answer 1

Чтобы выбрать текст в <p></p>, за исключением содержимого <span></span>, вы можете использовать селектор :not():

p :not(span)

Хотя THIS не заключен в элемент, он не может быть стилизован CSS независимо.

Если вам нужен CSS, тогда я советую обернуть THIS в другой тег с классом. В противном случае вы можете использовать css для форматирования <p></p> и возврата стилей дочерних элементов, см. unset , наследовать и initial . e.g.:

p {color: red}
p span { color: initial }
p span a { color: initial }

<p><span class='x' id='1'><a href='#'>y</a>.</span>THIS</p>

Answer 2

Вы можете указать это косвенно - сначала нацелившись на весь p, а затем на диапазон и a внутри него - эффективно выделив все внутри p, которое имеет тег.

В дальнейшем я нацеливаюсь на «ТЕКСТ», чтобы сделать его красным, а затем перезаписываю его на другие части, чтобы придать им разные цвета. Затем я представляю немного более длинную версию, чтобы продемонстрировать каждую часть как есть. целенаправленные.

p {color: red}
p span { color: black}
p span a { color: blue}

<p><span class='x' id='1'><a href='#'>y</a>.</span>THIS</p>


<p>
  <span class='x' id='1'>
    <a href='#'>This is a link</a>
  This is text within the span</span>
  This is another test
</p>