CSS属性选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_22480443/article/details/110448714

这篇博客主要介绍了CSS中的属性选择器，通过元素的属性及属性值来定位元素。文中列举并总结了各种属性选择器的使用实例，部分内容参考自阮一峰的CSS选择器笔记和W3school教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接上篇CSS选择器汇总：

11.属性选择器

根据元素的属性及属性值来选择元素。
下面是对所有的属性选择器的汇总，其中element元素可以省略。

选择器	含义	版本
element[attribute]	选中所有具有attribute属性的element元素	CSS2.1
element[attribute=“value”]	选中所有attribute属性等于value的element元素	CSS2.1
element[attribute~=“value”]	选中所有attribute属性包含"value"值的element元素,attribute属性可以有多个值，也可以只有一个	CSS2.1
element[attribute\|=“value”]	选取带有以value值开头的attribute属性值的element元素，value值必须是整个单词。常见的用途是匹配语言值。(常是多个连字号分隔（hyphen-separated）的值)	CSS2.1
element[attribute^=“value”]	匹配attribute属性的值以value开头的element元素。	CSS3
element[attribute$=“value”]	匹配attribute属性的值以"value"结尾的element元素	CSS3
element[attribute*=“value”]	匹配属性attribute的值包含"value"字符串的element元素	CSS3

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style type="text/css">
         /* 选中所有具有class属性的p元素 */
        /* p[class] {      
            color: red;
        } */
          /* 选中所有具有class属性的元素 */
        /* [class] {        
            color: blue;
        } */
        /* 选中所有具有class属性等于par1的p元素 */
        /* p[class=par1] {    
            color: yellow;
        } */
        /* 选中所有class属性包含"par"值的元素,class属性可以有多个值，也可以只有一个 */
        [class~=par] {
            color: pink;
        }
        /* 选取带有以par值开头的class属性值的元素，par值必须是整个单词。常见的用途是匹配语言值。  */
        [class|=par] {
            color: green;
        }
        /*  匹配class属性的值以pa开头的元素。 */
        [class^=pa] {
            color: blue;
        }

        /*  匹配class属性的值以ar结尾的元素。 */
        [class$=ar] {
            color: lightblue;
        }
        /*  匹配class属性的值包含a字符串的元素。 */
        [class*=a] {
            color: orange;
        }
    </style>
</head>
<body>
    <div>
        <h4>执迷不悟</h4>
        <span class="span1 par">所以会忙忙碌碌将爱麻木</span>
        <p class="par1">我对你又何止是执迷不悟</p>
        <p class="par2 ">眼泪偶尔会莫名的光顾</p>
        <div>
            <p class="par1 par">所以会忙忙碌碌将爱麻木</p>
            <p class="par1">可突然会想起了全部</p>
            <p class="par">我对你又何止是执迷不悟</p>
            <p class="par-2">所有的纪念日记得清楚</p>
            <p>庸人自扰的束缚狼狈演出</p>
        </div>
    </div>
</body>
</html>