Почему псевдокласс not не функционирует должным образом?

Я применяю следующий CSS-код: 
<pre><code>a:link:not(:visited) h3 {
    text-shadow: 0px 0px 1px #FFF !important;
}</code></pre>
Этот код должен добавлять тень к элементам h3 в обычных ссылках и посещённых ссылках. У меня также есть другие свойства тени, но они запрещены для определённого класса. В связи с этим, почему данный код не работает?
  • 10 января 2025 г. 15:43
Ответы на вопрос 3
Проблема, с которой вы сталкиваетесь, заключается в том, что селектор `a:link:not(:visited) h3` в вашем коде не найдет элементы `h3` внутри обычной ссылки. 

Селектор `a:link:not(:visited)` применяется только к самим ссылкам (`<a>`), и в вашу конструкцию включены элементы `h3`, которые, вероятно, являются дочерними элементами ссылки. Селектор, таким образом, ищет `h3`, которые находятся **внутри** элемента `a`, но не применяет стилей к элементам `h3`, если само `a` является посещённым.

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

```css
a:link h3 {
    text-shadow: 0px 0px 1px #FFF !important; 
}

a:visited h3 {
    // Здесь можно задать другие стили для посещённых ссылок, если нужно
}
```

Тем не менее, чтобы избежать конфликта стилей, убедитесь, что вы не используете какие-либо другие правила, которые могут переопределять этот стиль. 

В случае, если вы хотите применить стиль к `h3`, но при этом контролировать другие свойства, используйте дополнительные селекторы или комбинируйте классы с `!important`, чтобы обеспечить правильный приоритет в стилях. 

Таким образом, `text-shadow` будет применен только к `h3` внутри не посещённых ссылок, а если это необходимо, вы можете добавлять и другие условия для `h3` под другие селекторы.
<a href="https://developer.mozilla.org/ru/docs/Web/CSS/:link" rel="nofollow">https://developer.mozilla.org/ru/docs/Web/CSS/:link</a> <br/> <blockquote>CSS псевдокласс :link позволяет выбирать ссылки внутри элементов. Он выберет любую ссылку, которая ещё не была посещена, даже те, которые уже стилизованы, с помощью селекторов с другими псевдоклассами, относящимися к ссылкам, такими как :hover, :active или :visited</blockquote> <br/> <br/> Вы фигню написали. :link и так уже НЕ :visited <br/> <br/> Ну и стоит помнить про каскад - последовательность объявлений имеет значение. <br/> <br/> пишите так <br/> <pre><code class="css">a:link {}
a:visited {}
a:hover {}
a:active {}</code></pre>
<a href="https://qna.habr.com/user/BlagoYar" rel="nofollow">Простой Человек</a> , <br/> Кажется и не получится <br/> <blockquote><br/>
Примечание: Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill и stroke. Компонент альфа-канала в доступных стилях будет игнорироваться. Вместо него будет использоваться альфа-канал, используемый для непосещённых ссылок. Если в цвете альфа-канала для посещённых ссылок задан 0, то в этом случае будет использоваться цвет непосещённых ссылок.Несмотря на то, что цвет может меняться, метод getComputedStyle наврёт и всегда будет давать значение цвета непосещённых ссылок.Для дополнительной информации об ограничениях и их причин, смотрите Приватность и селектор :visited.<br/>
</blockquote> <br/> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/:visited" rel="nofollow">https://developer.mozilla.org/ru/docs/Web/CSS/:visited</a>
Похожие вопросы