前端基础知识学习---CSS3学习（二）属性选择器_前端技术当选择一个属性选择是另一个属性必选-优快云博客

本文详细介绍了CSS中各种属性选择器的应用，包括存在和值属性选择器如[attr]、[attr=val]等，以及子串值属性选择器如[attr|=val]、[attr^=val]等，并通过具体示例展示了它们如何作用于HTML结构。

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

属性选择器

存在和值属性选择器

html结构

<div id="wrap">
    <div name="zhangsan">1</div>
    <div name="li luo">2</div>
    <div name="li">3</div>
</div>

[attr]：该选择器选择包含attr属性的所有元素，无论attr的值是什么

div[name]{border: 1px solid blueviolet;} /*选中的是所有div*/

[attr = val]：该选择器仅选择attr属性被赋值val的所有元素

div[name = "li"]{border: 1px solid coral;} /*选中的是2,3号div*/

[attr ~= val]：表示带有以attr命名的属性的元素，并且该属性是以一个空格作为分割的值列表，其中至少一个为val

div[name ~= "luo"]{border: 1px solid coral;} /*选中的是2号div*/

子串值属性选择器

html结构

<div id="wrap">
    <div name="luo-zhangsan">1</div>
    <div name="li luo">2</div>
    <div name="luo-li">3</div>
    <div name="luoliluo">4</div>
</div>

[attr |= val]：选择的是attr属性的值是val（包括val）或者以val-开头的元素

div[name |= "luo"]{border: 1px solid coral;} /*匹配的只有1,3号元素*/

[attr ^= val]：选择的是attr属性的值以val开头（包括val）的元素

div[name ^= "luo"]{border: 1px solid coral;} /*匹配的只有1,4号元素*/

[attr $= val]：选择的是attr属性的值以val结尾（包括val）的元素

div[name $= "luo"]{border: 1px solid coral;} /*匹配的只有2,4号元素*/

[attr *= val]：选择的是attr属性的值中包含字符串val的元素

div[name *= "luo"]{border: 1px solid coral;} /*匹配的只有1,2,3,4号元素*/