css属性选择器总结

属性选择器

属性选择器在 CSS2 中就已经被引入，并且在 CSS3 及更高版本中仍然被广泛使用，因为它们提供了一种灵活且强大的方式来选择具有特定属性的元素。

[attr]：

是一个属性选择器，用于选择具有指定属性的所有元素，而不论该属性的值是什么。这里的 attr 应该替换为你想要选择的属性名。
例如，如果你想要选择所有具有 data-custom 属性的元素，你可以这样写：

<style>
    [data-custom] {  
      /* 选择具有自定义属性的元素的CSS样式 */  
      color: purple;  
    }
</style>
<!--这条 CSS 规则会匹配所有带有 data-custom 属性的元素，不论该属性的值是什么 下边的元素都会被选中-->
<div data-custom="value1">This div has a data-custom attribute with value1.</div>  
<span data-custom="value2">This span has a data-custom attribute with value2.</span>  
<p data-custom>This paragraph has a data-custom attribute with no value.</p>

在上述 HTML 中，所有的 div、span 和 p 元素都会被选择并应用 color: purple; 样式，因为它们都带有 data-custom 属性，尽管它们的属性值可能不同或者没有值。

[attr=value]：

选择具有指定属性和值的元素。

<style>
div[id="box"]{background-color:#c00;}
</style>

<div id="box"></div>
[attr^=value]：
  选择属性值以特定字符串开头的元素。
<style>
div[class^="box-"]{background-color:#c00;}
</style>

<div class="box-abc">q</div><!--被选中-->
<div class="box-bcd">w</div><!--被选中-->
<div class="a box-x">e</div><!--不被选中-->

[attr$=value]：

选择属性值以特定字符串结尾的元素。

<style>
div[class$="-abc"]{background-color:#c00;}
</style>

<div class="b-ab">4</div><!--被选中-->
<div class="b_ab">5</div><!--被选中-->
<div class="ab box">6</div><!--不被选中-->

[attr*=value]：

选择属性值中包含特定字符串的元素，必须完全包含

<style>
div[class*="xy"]{background-color:#c0c;}
</style>

<div class="b-xy-one">4</div><!--被选中-->
<div class="xyz">5</div><!--被选中-->
<div class="youx">6</div><!--不被选中-->

[attr~=value]：

是一个属性选择器，用于选择具有指定属性的元素，且该属性的值必须是一个由空格分隔的列表，其中包含指定的词或短语。这里的 ~= 表示“包含词列表中的词”。
例如：假设你有一些带有 class 属性的 HTML 元素，这些 class 属性的值是由空格分隔的多个类名组成的列表。你可以使用 [attr~=value] 选择器来选择包含特定类名的元素。

<style>
    [class~=feature] {  
      /* 选择一个具有包含单词“feature”的类的元素 */  
      background-color: blue;  
    }
</style>
<div class="box feature">This is a featured box.</div>  
<div class="box">This is a regular box.</div>  
<div class="highlight feature">This is a highlighted feature box.</div>

在这个例子中，第一个和第三个 div 元素都会被选中，因为它们的 class 属性值中包含了词 feature。而第二个 div 元素则不会被选中，因为它的 class 属性值中没有包含 feature 这个词。
请注意，[attr~=value] 选择器对大小写敏感，除非在 HTML 文档中明确指定了属性值的大小写不敏感（这通常不是标准做法）。因此，确保在编写 CSS 选择器时使用与 HTML 属性值完全匹配的大小写是很重要的。
此外，虽然这个选择器在 CSS2 中就已经存在，但它在 CSS3 及更高版本中仍然被支持，并且经常与其他选择器和属性一起使用，以实现更复杂的样式和布局需求。

[attr|=value]：

是一个属性选择器，用于选择具有指定属性的元素，且该属性的值必须是以指定值开头的词或短语，或者是与指定值完全相等。这里的 |= 表示“以…开头或以连字符（-）分隔的精确值”
这个选择器通常用于选择具有特定语言或特定前缀的属性值的元素。例如，在 HTML 中，lang 属性经常用于指定元素内容的语言。如果你想要选择所有以 “en” 开头的 lang 属性的元素（如 lang=“en”, lang=“en-US”, lang=“en-GB” 等），你可以使用 [lang|=en] 选择器。

<style>
    [class|=en] {  
      /* 选择lang属性值以“en”开头的元素 */  
      background-color: green;  
    }
</style>
<div class="en box">This is a featured box.</div>  <!--被选中-->
<div class="en-US box">This is a regular box.</div>  <!--被选中-->
<div class="engliish feature">This is a highlighted feature box.</div>
<div class="en_US feature">This is a highlighted feature box.</div>

然而，需要注意的是，这个选择器的行为可能与你预期的不完全一样。按照规范，它实际上会匹配属性值等于 “en” 或者属性值以 “en-” 开头的元素。也就是说，它会匹配 lang=“en” 和 lang=“en-US”，但不会匹配 lang=“english” 或 lang=“en_US”（注意下划线而不是连字符）。
但在实际使用中，很多开发者可能会误以为它会匹配任何以指定值开头的属性值，而不仅仅是那些以连字符分隔的值。因此，在使用这个选择器时要特别小心，确保你的属性值格式与选择器的行为相匹配。

[attr^=“val”][attr$=“val”]

可以多个属性选择器叠加起来进行使用。

<style>
/* 以 "https" 开始，".org" 结尾的链接 */
a[href^="https"][href$=".org"] {color: green;}
</style>

<ul>
    <li><a href="#internal">内部链接</a></li>
    <li><a href="http://example.com">示例链接</a></li>
    <li><a href="#InSensitive">非敏感内部链接</a></li>
    <li><a href="http://example.org">示例 org 链接</a></li>
    <li><a href="https://example.org">示例 https org 链接</a></li><!--被选中-->
</ul>

请注意，属性选择器是区分大小写的，除非在 HTML 文档中明确指定了属性名不区分大小写（这在实际开发中是非常罕见的）。因此，确保在编写 CSS 选择器时属性名的大小写与 HTML 中的实际使用保持一致是很重要的。

新增属性选择器，可以添加大小写规则

[attr operator value i]

在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

[attr operator value s]

在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

<style>
/* 根据文档语言不同，大小写敏感性不同 */
ol[type="a"] {
/*这里测试的最新火狐和 最新 chrome ，最新 edge都支持*/
  list-style-type: lower-alpha;
  background: red;
}
/*这里测试的最新火狐支持；最新 chrome ，最新 edge都不支持*/
ol[type="b" s] {
  list-style-type: lower-alpha;
  background: lime;
}
/*这里测试的最新火狐支持；最新 chrome ，最新 edge都不支持*/
ol[type="B" s] {
  list-style-type: upper-alpha;
  background: grey;
}
/*这里测试的最新火狐和 最新 chrome ，最新 edge都支持*/
ol[type="c" i] {
  list-style-type: upper-alpha;
  background: green;
}
</style>


<ol type="A">
    <li>非大小写敏感匹配呈现红色背景（类型选择器默认值）</li>
</ol>

<ol class="A">
    <li>大小写敏感所以不会被呈现红色背景</li>
</ol>

<ol type="b">
    <li>如果支持 `s` 修饰符（大小写敏感匹配），拥有亮绿色背景</li>
</ol>
<ol type="B">
    <li>如果支持 `s` 修饰符（大小写敏感匹配），拥有灰色背景</li>
</ol>
<ol type="C">
    <li>如果支持 `i` 修饰符（大小写不敏感匹配），拥有绿色背景</li>
</ol>