CSS выбрать все элементы 'code', которые не являются прямым потомком тега 'pre' - PullRequest
Новая
       0

CSS выбрать все элементы 'code', которые не являются прямым потомком тега 'pre'

0 голосов
/ 18 июня 2020

Я пытаюсь выбрать все элементы code, кроме того, который является потомком элемента pre, используя селектор :not(~). Этот пост имеет очень похожий ответ, но мне трудно понять свою проблему. 

<body>
<div><code>Div Code</code></div> 
<pre><code>Pre Code
Body Code

Этот селектор, использующий :not(~), похоже, не работает. 

code:not(pre code) {
  color:red;
}

Селектор code выбирает все три, а pre code выбирает только второй, поэтому не следует объединять их с помощью :not, чтобы получить все три, кроме второго?

Что здесь может быть не так?

Я мог бы использовать селектор, отличный от :not(~), но он лучше всего подходит для моего варианта использования, поскольку элемент code может быть вложен в другие элементы, и я хочу исключить только потомков pre.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 18 июня 2020

Если ваш <code> всегда является прямым потомком <pre>, вы можете использовать комбинатор прямого потомка для его таргетинга: 

:not(pre) > code {
  color:red;
}
<body>
  <div><code>Div Code</code></div> 
  <pre><code>Pre Code
Body Code

Примечание: если вы удалили >, интуитивно понятно, это должно сработать, но поскольку он может быть нацелен на любого предка, например, <body>, он будет соответствовать, потому что body:not(pre) истинно.

0 голосов
/ 18 июня 2020

Вы не можете этого сделать. :not() работает только для самого тега, а не для родительских тегов, которые его обертывают.

Что вы можете сделать, так это добавить класс в <code>, например: <code class="notpre"> и добавить css Правило вроде этого: 

code.notpre {
  color:red;
}

Вы можете узнать больше о псевдоклассе :not() здесь .

Редактировать 1: Вы можете сделать это, тоже, но не рекомендуется, потому что он слишком "широкий" и может повлиять на некоторые нежелательные теги <code>. Я бы рекомендовал использовать имена классов, как в первом упомянутом решении. 

code {
  color:red;
}
pre code {
  color:initial;
}
<div><code>Div Code</code></div> 
<pre><code>Pre Code
Body Code
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...