零基础学习CSS(10)——属性选择器
2024-04-12 20:05:23
官方资料
鱼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>
零基础学习CSS(10)——属性选择器相关推荐
- 零基础学习CSS(2)——通用选择器、元素选择器、类选择器、id选择器
官方资料 鱼C课程案例库:https://ilovefishc.com/html5/ html5速查手册:https://man.ilovefishc.com/html5/ css速查手册:https ...
- 零基础学习CSS(12)——背景美化
官方资料 鱼C课程案例库:https://ilovefishc.com/html5/ html5速查手册:https://man.ilovefishc.com/html5/ css速查手册:https ...
- 推荐零基础学习大数据的10本经典图书
学习大数据并不是一蹴而就的事情,及时工作多年的开发工程师都需要不断的补充新鲜的知识内容.目前学习大数据知识可以通过视频和图书两种方式学习,视频的优势在于能够将老师的个人开发经验传授给学习者,而图书的优 ...
- Mendix敏捷开发零基础学习《一》-基础（数据模型、页面创建、数据源绑定、属性绑定、关系型数据模型）
目录结构 Mendix敏捷开发零基础学习<一> 一.环境依赖 二.业务场景 三.需求分析 四.项目实现 1.创建项目 2.创建数据模型 3.创建页面 4.数据源绑定 5.属性绑定 6.数据 ...
- FPGA零基础学习：基于FPGA的多路选择器设计（附代码）
FPGA零基础学习:基于FPGA的多路选择器设计(附代码) 大侠好,欢迎来到FPGA技术江湖.本系列将带来FPGA的系统性学习,从最基本的数字电路基础开始,最详细操作步骤,最直白的言语描述,手把手的& ...
- 第10期：Python零基础学习路线
大家好,我是你们的老朋友老王随聊,今天和大家讨论的话题--Python零基础应该怎么学? 通过这段时间和群里同学们交流,发现很多大学生甚至职场小白对Python学习路线不是很清晰,所以我花了一些时间给 ...
- 我的Go+语言初体验——（4）零基础学习 Go+ 爬虫
我的Go+语言初体验--(4)零基础学习 Go+ 爬虫 "我的Go+语言初体验" | 征文活动进行中- Go+ 语言非常适合编写爬虫程序,具有并发机制完善.并发数量大.占用资源少. ...
- [转载] Python Web开发—进阶提升 490集超强Python视频教程 真正零基础学习Python视频教程
参考链接: 在Python中创建代理Web服务器 2 Python Web开发-进阶提升 490集超强Python视频教程 真正零基础学习Python视频教程 [课程简介] 这是一门Python We ...
- HTML，css和JavaScript的基础学习—css篇
HTML,css和JavaScript的基础学习-css篇 1.css是什么?由什么组成? 层叠样式表,定制html元素的显示样式,美化页面,对于前端页面的搭建十分重要. 由三部分组成:选择器,属性, ...
最新文章
- LeetCode 笔记系列 18 Maximal Rectangle [学以致用]（最大矩形）
- k-means算法的理解与实现
- 浅谈在Java开发中的枚举的作用和用法
- 0330复利计算（修改版）
- Android中列表动态删除item,如何删除Android ExpandableListView中某个group item的child item？...
- Day05:装饰器，三元表达式，函数的递归，匿名/内置函数，迭代器，模块，开发目录...
- A1107班拜年视频录制过程记录
- Android的Dalvik虚拟机的一个小BUG
- 玩转 SpringBoot 2 快速整合 Listener
- typecho 去掉index.php,Typecho设置伪静态去掉url中的index.php
- GridView网格控件
- python中根据字符串导入模块module
- android app入口函数,Android App程序运行过程 ActivityThread.main()------详解系列（一）...
- 易基因 | 国自然选题——易基因RNA甲基化测序技术（m6A m5C）正热门
- 爱情就是一物降一物——金庸教你谈恋爱
- 如何向icloud上传文件_怎么把文件放进苹果icloud
- 基于微信小程序音乐播放器
- 谈PＷＭ和CPU风扇
- Q2营收利润双攀升，陆金所的市值却仍被“束缚”
- 2022中国公司注册亚马逊欧洲站卖家资质审核（KYC）所需资料料及要求！