Что этот формат делает в CSS: p [class | = abc]?

Question

Что делает этот формат в CSS:

p[class|=abc]

и

#pTag a[href^="https://"]

Я не могу найти его, так как не знаю точной терминологии для этого.

Любая помощь с некоторыми ссылками для изучения этих квадратных скобок будет принята с благодарностью.

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

Answer 1

Это Селектор атрибутов . Прочитайте ссылку для получения дополнительной информации.

Обратите внимание, что последним примером CSS является селектор CSS3.

Answer 2

Селектор атрибутов [| =]:

Дефис (-) используется в основном в качестве разделителя для языковых кодов.

<style>
    .test        { display:none; }
    [lang|="en"] { display:block; }
</style>

<div class="test" lang="en-us">Test for [|=] (Hyphen) succeeded.</div>

Префикс [^ =] Селектор атрибутов:

<style>
    .test       { display:none; }
    [attr^="B"] { display:block; }
</style>

<div class="test" attr="Blue">Test for [^=] (Prefix) succeeded.</div>

Answer 3

Селекторы

E [lang | = "en"] Соответствует любому элементу E, чей атрибут "lang" имеет разделенный дефисом список значений, начинающийся (слева)) с "en".

.

[att ^ = val] Представляет элемент с атрибутом att, значение которого начинается с префикса "val".Если «val» - пустая строка, то селектор ничего не представляет.