零基础学习CSS(10)——属性选择器

最新推荐文章于 2024-03-18 23:43:11 发布

Dragon水魅

最新推荐文章于 2024-03-18 23:43:11 发布

阅读量265

点赞数

分类专栏：零基础学习Web开发文章标签： html css

本文链接：https://blog.csdn.net/qq_43650934/article/details/109073909

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

官方资料

鱼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>

[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>

Dragon水魅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
零基础学习CSS(10)——属性选择器

官方资料鱼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&
复制链接

扫一扫

专栏目录