CSS3中的属性选择器

关注

原创最新推荐文章于 2026-06-08 22:12:35 发布 349 阅读 AI 写同款· GEO 优化 ›

CSS3中的属性选择器——增强选择元素的能力在CSS3中，属性选择器是一种强大的工具，它允许我们根据元素的属性以及属性值来选择特定的元素。属性选择器可以根据元素的属性值、属性值中的某一部分或者属性值满足特定条件来选择元素。这将选择所有class属性值中包含"active"作为一个单词的元素，并将相应的CSS样式应用于它们。这将选择所有title属性值中包含"OpenAI"的元素，并将相应的CSS样式应用于它们。这将选择所有class属性以"btn-"开头的按钮元素，并将相应的CSS样式应用于它们。）后缀值选择器用于选择属性值以指定值结尾的元素。阅读详情

相较于CSS，CSS3中增加了三个属性选择器：[att*=val],[att^=val],[att$=val].

[att * =val]属性选择器
基本概念：如果元素用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式。

<head>
	<meta charset="UTF-8">
	<style>
        [id*=section]{
            background: blue;
        }
	</style>
<head>
<body>
<div id="section1">section1</div>
</body>

[att^=val]属性选择器
基本概念：如果用att表示的属性的属性值的开头字符为val指定的字符的话，那么该元素使用这个值。

<head>
	<meta charset="UTF-8">
	<style>
        [id^=t]{
            background: blue;
        }
	</style>
<head>
<body>
<div id="ttsection">ttsection</div>
</body>

[att$=val]属性选择器
基本概念：如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式。
PS.如果指定的字符为数字，那么需要在之前加一个" \ "以及离数字最近的一个字符（除了连接符为“_”时）

<head>
	<meta charset="UTF-8">
	<style>
        [id$=\n1]{
            background: blue;
        }
        [id$=\.2]{
            background: red;
        }
        [id$=_2]{
        /*也可以是[id$=\_2]*/
            background: pink;
        }
	</style>
<head>
<body>
<div id="section1">section1</div>
<div id="section1-1">section1</div>
<div id="section1-1-2">section1</div>
<div id="section1.2">section1</div>
<div id="section1_2">section1</div>
</body>