官方资料
鱼C课程案例库:https://ilovefishc.com/html5/
html5速查手册:https://man.ilovefishc.com/html5/
css速查手册:https://man.ilovefishc.com/css3/
学习正文
[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>
[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>
[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>
[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” (如果有多个属性值仅需匹配一个):
<!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>
[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>