Комбинатор CSS для представления условия И

Допустим, я хочу применить правило CSS ко всем якорям тогда и только тогда, когда:

Их атрибут href начинается точно с «http: // www.»; *а также *
Их атрибут target имеет точное значение _blank.

Как мне представить этот а также как комбинатор?

Если я сделаю именно это, он выполнит операцию или же. Сам синтаксис делает очевидным, что это будет или же.

a[href^ = "http://www."]::after, a[target = "blank"]::after {
    content : "->"
}

Есть комбинатор а также?

Рассмотрим полный пример ниже.

p {
  font-weight: bold; 
}

a[href^ = "http://www."]::after, a[target = "blank"]::after {
content : "->"
}

<p>Valid ones that I'd like the rule to match</p>
<a href = "http://www.google.com"
   target = "_blank">Google</a>
<br />
<a href = "http://www.yahoo.com"
   target = "_blank">Yahoo!</a>
<br />

<p>Invalid ones that I'd like the rule NOT to match</p>
<a href = "http://www.microsoft.com">Microsoft</a>
<br />
<a target = "_blank">Anchor without href</a>
<br />
<a href = "NamedAnchor"
   target = "_blank">Amazon within this document</a>
<br />
<a href = "https://www.facebook.com"
   target = "_blank">Facebook</a>
<br />
<a href = "http://apple.com"
   target = "_blank">Apple</a>

<p>Observe how even the anchor <i>Microsoft</i> gets 
selected by the combinator because the anchor starts with 
the right <code>href</code> even though it does not have 
the <code>target</code> attribute</p>

Почему бы вам не определить класс и не добавить его к тем, которые вы хотите включить, включая эту атрибуцию?

— 04.04.2018 10:14

a[href^ = "http://www."][target = "_blank"]::after { content : "->" }; должен работать, не так ли?

— 04.04.2018 10:14

"Есть ли комбинатор и?" - вы уже «объединили» имя тега и селектор атрибутов с a[href^ = "http://www."], и все же вам все равно нужно спросить?

— 04.04.2018 10:17

@ Джереми Спасибо. Я этого не знал. Это действительно работает. :-)

— 04.04.2018 10:25

@CBroe Не совсем очевидно, что компоненты селектора атрибутов податливы, как вы это делаете. Кто-то должен указать вам на это, как вы только что сделали. Это не означает недостаток интеллекта у человека, задающего вопрос.

— 04.04.2018 10:27

Добавлен более конкретный дубликат, хотя общий случай уже охватывает его, говоря, что «селекторы атрибутов ничем не отличаются от любого другого простого селектора».

— 04.04.2018 11:48

html css

04.04.2018 10:11

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

199

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Конечно,

Поместите оба атрибута друг за другом (без пробела)

a[href^ = "http://www."][target = "_blank"]

Также обратите внимание, что я исправил опечатку, вы пропустили подчеркивание перед пробелом.

p {
  font-weight: bold; 
}

a[href^ = "http://www."][target = "_blank"]::after {
content : "->";
}

<p>Valid ones that I'd like the rule to match</p>
<a href = "http://www.google.com"
   target = "_blank">Google</a>
<br />
<a href = "http://www.yahoo.com"
   target = "_blank">Yahoo!</a>
<br />

<p>Invalid ones that I'd like the rule NOT to match</p>
<a href = "http://www.microsoft.com">Microsoft</a>
<br />
<a target = "_blank">Anchor without href</a>
<br />
<a href = "NamedAnchor"
   target = "_blank">Amazon within this document</a>
<br />
<a href = "https://www.facebook.com"
   target = "_blank">Facebook</a>
<br />
<a href = "http://apple.com"
   target = "_blank">Apple</a>

<p>Observe how even the anchor <i>Microsoft</i> gets 
selected by the combinator because the anchor starts with 
the right <code>href</code> even though it does not have 
the <code>target</code> attribute</p>

04.04.2018 10:14

Другие вопросы по теме

Firefox неправильно отображает элементы при загрузке страницы mvc razor, select2 js

Angular 2+ Закрыть div с помощью кнопки x

Как получить логотип до упора влево с помощью css

Как скопировать css из Developers Tool при использовании Compass

Бутстрап срывается при использовании push-pull

Прокрутка зависает с выпадающим меню начальной загрузки

Родительский элемент Flex не расширяется до ширины дочернего элемента в IE11

Исправить нижний колонтитул внизу с помощью jQuery

Как воспроизвести аудиофайл amr на компьютере с помощью HTML-кода? Я много раз пробовал

FlexBox со 100% высотой

Комбинатор CSS для представления условия И

Ответы 1

Другие вопросы по теме

Похожие вопросы