零基础学习CSS(10)——属性选择器
零基础学习CSS(10)——属性选择器
Dragon水魅
发布于 2026-01-23 19:00:11
发布于 2026-01-23 19:00:11
官方资料
鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/
学习正文
属性选择器.png
[attr=“val”]：匹配定义了 attr 属性，且属性值为 “val” ：
<!DOCTYPE html>
<html>
<head>
<title>属性选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 使用属性选择器 */
/* 匹配该class属性，且属性值为"Wood" */
[class="Wood"] {
background-color: red;
}
</style>
</head>
<body>
<p>五行学说最早在道家学说中出现。它强调整体概念，描绘了事物的结构关系和运动形式。</p>
<p>五行相生:金生水，水生<span class="Wood">木</span>，<span class="Wood">木</span>生火，火生土，土生金</p>
<ul>
<li class="Wood-Fire"><span class="Wood">木</span>生火:因为火以<span class="Wood">木</span>料作燃料的材料。
<li class="Fire-Earth">火生土:因为火燃烧物体后，物体化为灰烬而灰烬便是土</li>
<li class="Earth-Metal">土生金:因为金蕴藏于泥土石块之中，经冶炼后才提取黄金</li>
<li class="Metal-Mater">金生水:因为金若被烈火燃烧，便溶为液体，液体属水;水要依靠铁器来开导疏通</li>
<li class="Mater-Mlood">水生<span class="Mood">木</span>:因为水灌溉树<span class="Wood">木</span>
</ul>
<p>五行相克:金克<span class="Wood">木</span>，<span class="Wood">木</span>克土，土克水，水克火，火克金</p>
<ul>
<li class="Water-Fire">水克火:因为火遇水便熄灭</li>
<li class="Fire-Metal">火克金:因为烈火能溶解金属</li>
<li class="Metal-Mood">金克<span class="Wood">木</span>:因为金属铸造的割切工具可锯毁树
<li class="Wood-Earth"><span class="Wood">木</span>克土:因为树根苗的力量强大，能突破土的障碍</li>
<li class="Earth-Water">土克水:因为土能防水</li>
</body>
</html>
image.png
[attr^=“val”]：匹配定义了 attr 属性，且属性值为" val" 开头：
<!DOCTYPE html>
<html>
<head>
<title>属性选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 使用属性选择器 */
/* 匹配class属性，且属性值为"Wood"开头 */
li[class^="Wood"] {
background-color: red;
}
</style>
</head>
<body>
<p>五行学说最早在道家学说中出现。它强调整体概念，描绘了事物的结构关系和运动形式。</p>
<p>五行相生:金生水，水生<span class="Wood">木</span>，<span class="Wood">木</span>生火，火生土，土生金</p>
<ul>
<li class="Wood-Fire"><span class="Wood">木</span>生火:因为火以<span class="Wood">木</span>料作燃料的材料。
<li class="Fire-Earth">火生土:因为火燃烧物体后，物体化为灰烬而灰烬便是土</li>
<li class="Earth-Metal">土生金:因为金蕴藏于泥土石块之中，经冶炼后才提取黄金</li>
<li class="Metal-Mater">金生水:因为金若被烈火燃烧，便溶为液体，液体属水;水要依靠铁器来开导疏通</li>
<li class="Mater-Mlood">水生<span class="Mood">木</span>:因为水灌溉树<span class="Wood">木</span>
</ul>
<p>五行相克:金克<span class="Wood">木</span>，<span class="Wood">木</span>克土，土克水，水克火，火克金</p>
<ul>
<li class="Water-Fire">水克火:因为火遇水便熄灭</li>
<li class="Fire-Metal">火克金:因为烈火能溶解金属</li>
<li class="Metal-Mood">金克<span class="Wood">木</span>:因为金属铸造的割切工具可锯毁树
<li class="Wood-Earth"><span class="Wood">木</span>克土:因为树根苗的力量强大，能突破土的障碍</li>
<li class="Earth-Water">土克水:因为土能防水</li>
</body>
</html>
image.png
[attr$=“val”]：匹配定义了 attr 属性，且属性值为 “val” 结尾：
<!DOCTYPE html>
<html>
<head>
<title>属性选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 使用属性选择器 */
/* 匹配class属性，且属性值为"Wood"结尾： */
li[class$="Wood"] {
background-color: red;
}
</style>
</head>
<body>
<p>五行学说最早在道家学说中出现。它强调整体概念，描绘了事物的结构关系和运动形式。</p>
<p>五行相生:金生水，水生<span class="Wood">木</span>，<span class="Wood">木</span>生火，火生土，土生金</p>
<ul>
<li class="Wood-Fire"><span class="Wood">木</span>生火:因为火以<span class="Wood">木</span>料作燃料的材料。
<li class="Fire-Earth">火生土:因为火燃烧物体后，物体化为灰烬而灰烬便是土</li>
<li class="Earth-Metal">土生金:因为金蕴藏于泥土石块之中，经冶炼后才提取黄金</li>
<li class="Metal-Mater">金生水:因为金若被烈火燃烧，便溶为液体，液体属水;水要依靠铁器来开导疏通</li>
<li class="Mater-Wood">水生<span class="Mood">木</span>:因为水灌溉树<span class="Wood">木</span></li>
</ul>
<p>五行相克:金克<span class="Wood">木</span>，<span class="Wood">木</span>克土，土克水，水克火，火克金</p>
<ul>
<li class="Water-Fire">水克火:因为火遇水便熄灭</li>
<li class="Fire-Metal">火克金:因为烈火能溶解金属</li>
<li class="Metal-Wood">金克<span class="Wood">木</span>:因为金属铸造的割切工具可锯毁树
<li class="Wood-Earth"><span class="Wood">木</span>克土:因为树根苗的力量强大，能突破土的障碍</li>
<li class="Earth-Water">土克水:因为土能防水</li>
</body>
</html>
image.png
[attr*=“val”]：匹配定义了 attr 属性，且属性值包含 “val” ：*
<!DOCTYPE html>
<html>
<head>
<title>属性选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 使用属性选择器 */
/* 匹配class属性，且属性值包含"Woo" */
[class*="Woo"] {
background-color: red;
}
</style>
</head>
<body>
<p>五行学说最早在道家学说中出现。它强调整体概念，描绘了事物的结构关系和运动形式。</p>
<p>五行相生:金生水，水生<span class="Wood">木</span>，<span class="Wood">木</span>生火，火生土，土生金</p>
<ul>
<li class="Wood-Fire"><span class="Wood">木</span>生火:因为火以<span class="Wood">木</span>料作燃料的材料。
<li class="Fire-Earth">火生土:因为火燃烧物体后，物体化为灰烬而灰烬便是土</li>
<li class="Earth-Metal">土生金:因为金蕴藏于泥土石块之中，经冶炼后才提取黄金</li>
<li class="Metal-Mater">金生水:因为金若被烈火燃烧，便溶为液体，液体属水;水要依靠铁器来开导疏通</li>
<li class="Mater-Wood">水生<span class="Mood">木</span>:因为水灌溉树<span class="Wood">木</span></li>
</ul>
<p>五行相克:金克<span class="Wood">木</span>，<span class="Wood">木</span>克土，土克水，水克火，火克金</p>
<ul>
<li class="Water-Fire">水克火:因为火遇水便熄灭</li>
<li class="Fire-Metal">火克金:因为烈火能溶解金属</li>
<li class="Metal-Wood">金克<span class="Wood">木</span>:因为金属铸造的割切工具可锯毁树
<li class="Wood-Earth"><span class="Wood">木</span>克土:因为树根苗的力量强大，能突破土的障碍</li>
<li class="Earth-Water">土克水:因为土能防水</li>
</ul>
</body>
</html>[attr~=“val”]：匹配定义了 attr 属性，且属性值为 “val” （如果有多个属性值仅需匹配一个）：
image.png
<!DOCTYPE html>
<html>
<head>
<title>属性选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 使用属性选择器 */
/* 匹配class属性，且属性值位"Wood"（如果有多个属性值仅需匹配一个） */
[class~="Wood"] {
background-color: red;
}
</style>
</head>
<body>
<p>五行学说最早在道家学说中出现。它强调整体概念，描绘了事物的结构关系和运动形式。</p>
<p>五行相生:金生水，水生<span class="Wood">木</span>，<span class="Wood">木</span>生火，火生土，土生金</p>
<ul>
<li class="Wood-Fire"><span class="Wood">木</span>生火:因为火以<span class="Wood">木</span>料作燃料的材料。
<li class="Fire-Earth">火生土:因为火燃烧物体后，物体化为灰烬而灰烬便是土</li>
<li class="Earth-Metal">土生金:因为金蕴藏于泥土石块之中，经冶炼后才提取黄金</li>
<li class="Metal-Mater">金生水:因为金若被烈火燃烧，便溶为液体，液体属水;水要依靠铁器来开导疏通</li>
<li class="Mater-Wood">水生<span class="Mood">木</span>:因为水灌溉树<span class="Wood">木</span></li>
</ul>
<p>五行相克:金克<span class="Wood">木</span>，<span class="Wood">木</span>克土，土克水，水克火，火克金</p>
<ul>
<li class="Water-Fire">水克火:因为火遇水便熄灭</li>
<li class="Fire-Metal">火克金:因为烈火能溶解金属</li>
<li class="Metal-Wood">金克<span class="Wood">木</span>:因为金属铸造的割切工具可锯毁树
<li class="Wood-Earth"><span class="Wood">木</span>克土:因为树根苗的力量强大，能突破土的障碍</li>
<li class="Earth-Water">土克水:因为土能防水</li>
</ul>
</body>
</html>
image.png
[attr|=“val”]：匹配定义了 attr 属性，且属性值为 “val” 或 “val-随便什么其他的后缀” ：
<!DOCTYPE html>
<html>
<head>
<title>属性选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 使用属性选择器 */
/* 匹配class属性，且属性值为"Wood"或"Wood-sth"" */
[class|="Wood"] {
background-color: red;
}
</style>
</head>
<body>
<p>五行学说最早在道家学说中出现。它强调整体概念，描绘了事物的结构关系和运动形式。</p>
<p>五行相生:金生水，水生<span class="Wood">木</span>，<span class="Wood">木</span>生火，火生土，土生金</p>
<ul>
<li class="Wood-Fire"><span class="Wood">木</span>生火:因为火以<span class="Wood">木</span>料作燃料的材料。
<li class="Fire-Earth">火生土:因为火燃烧物体后，物体化为灰烬而灰烬便是土</li>
<li class="Earth-Metal">土生金:因为金蕴藏于泥土石块之中，经冶炼后才提取黄金</li>
<li class="Metal-Mater">金生水:因为金若被烈火燃烧，便溶为液体，液体属水;水要依靠铁器来开导疏通</li>
<li class="Mater-Wood">水生<span class="Mood">木</span>:因为水灌溉树<span class="Wood">木</span></li>
</ul>
<p>五行相克:金克<span class="Wood">木</span>，<span class="Wood">木</span>克土，土克水，水克火，火克金</p>
<ul>
<li class="Water-Fire">水克火:因为火遇水便熄灭</li>
<li class="Fire-Metal">火克金:因为烈火能溶解金属</li>
<li class="Metal-Wood">金克<span class="Wood">木</span>:因为金属铸造的割切工具可锯毁树
<li class="Wood-Earth"><span class="Wood">木</span>克土:因为树根苗的力量强大，能突破土的障碍</li>
<li class="Earth-Water">土克水:因为土能防水</li>
</ul>
</body>
</html>
image.png
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2026-01-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号