css 选择器 - 这种格式在 CSS 中有什么作用:p[class|=abc]

Question

这种格式在CSS中有什么作用：

p[class|=abc]

和

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

我无法搜索它，因为我不知道它的确切术语。

任何关于研究这些方括号内容的链接的帮助将不胜感激。

提前谢谢。

Answer 1

它们是属性选择器。阅读链接了解更多信息。

请注意，最后一个 CSS 示例是一个 CSS3 选择器。

Answer 2

选择器

E[lang|="en"] 匹配任何 E 元素 其"lang"属性具有 以连字符分隔的值列表 以"en"开头（从左起）。

.

[att^=val] 表示具有 att 属性的元素，其值以 前缀"val"。如果"val"是空的 字符串，则选择器不会 代表任何东西。

Answer 3

连字符 [|=] 属性选择器：

连字符 （-） 主要用作语言代码的分隔符。

<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>