Как использовать псевдокласс: not () для исключения дочернего элемента

Question

Допустим, у меня есть тег h1, который выглядит следующим образом:

<h1>
  I don't want to see this, <span>but I want to see this.</span>
</h1>

Мне нужно просто использовать CSS, чтобы сделать <h1> невидимым, не затрагивая <span>. Вот как это должно выглядеть:

but I want to see this.

Даже при том, что это работает нормально:

h1 {
  visibility: hidden;
}
span {
  visibility: visible;
}

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

h1:not(span) {
  visibility: hidden;
}

Хотя это не работает, и я не могу понять, почему. Есть идеи, почему это происходит?

Вот JSFiddle

Answer 1

Это не работает, и я не могу понять, почему. Есть идеи, почему это происходит?

Потому что h1 никогда не бывает span. Это означает, что аргумент отрицания всегда истинен, и правило всегда действует.

Это код:

h1:not(span) {
  visibility: hidden;
}

Лог c здесь выглядит так: Цель все h1s, которые не являются пролетами . Это всегда так, поэтому visibility: hidden всегда активен. Это то же самое, что и просто h1.

Лог c, который вы ищете: Игнорировать пролеты, являющиеся потомками h1s . Совершенно иначе.

Я думаю, что использование двух селекторов, как вы уже сделали, - это путь к go.

Answer 2

Свойство visibility не применяется к h1's дочерним элементам, оно применяется непосредственно к h1. Вы не можете настроить таргетинг на h1, и это дети в одном селекторе.