本节内容有点绕，在以下代码中我已经努力用最容易理解的方式表达了属性选择器的各种语法，每一种语法在代码中都做了详细注释，大家可以把代码复制下来一点点的理解。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器之属性选择器--通过其它属性精确选择元素</title>
</head>
<body>
<style>
/* 属性选择器[属性名] 以下选择器表示：选择属性名为deng的标签。选中的是第三首的标题*/
[deng]{
color:darkcyan;
}
/* [属性名=属性值] 以下选择器表示：选择name为poiuo的标签。选中的是第一首的标题*/
[name=poiuo]{
color:blueviolet;
}
/* 表示选择type为text的标签。选中的是第一个文本框，输入的内容为红色 */
[type=text]{color:Red;}
/* *=表示包含。 以下选择器表示：选择name属性中包含yang这几个字母的标签。选中的是第一首的第二三句*/
[name*="yang"]{ color:red;}
/* ~=表示完整包含。以下选择器表示：选择name属性中用空格隔开的其中一个为uuu的标签。选中的是第一首的第五句 */
[name~="uuu"]{ color:cornflowerblue;}
/* |=表示开头完整包含。以下选择器表示：选择name属性中用-隔开的第一个属性值为gushi的标签。选中的是第一首的第一句*/
[name|="gushi"]{ color:green;}
/* ^=表示开头包含。以下选择器表示：选择name属性开头是tixi这几个字符的标签。选中的是第二首的第一二句*/
[name^="tixi"]{ color:saddlebrown;}
/* $=表示结尾包含。以下选择器表示：选择name属性的结尾包含mu这两个字符的标签。选中的是第二首第三四句*/
[name$="mu"]{ color:magenta;}
/* 注意：以上五个选择器只能同时选中同一层级的元素 */
</style>
<div name="poiuo">第一首《小池》宋朝·杨万里</div>
<p name="gushi-yi-shou">泉眼无声惜细流，</p>
<p name="guyangge">树阴照水爱晴柔。</p>
<p name="dayangduizhang">小荷才露尖尖角，</p>
<p name="shi">早有蜻蜓立上头。</p>
<p name="uuu hehe haha">早有蜻蜓立上头。</p>
<hr>
<p name="tixisongchao">第二首《题西林壁》宋朝·苏轼</p>
<p name="tixihengkan">横看成岭侧成峰</p>
<p name="yuanjin">远近高低各不同</p>
<p name="mianmu">不识庐山真面目</p>
<p name="shenmu">只缘身在此山中</p>
<hr>
<p deng="18">第三首《登飞来峰》宋朝·王安石</p>
<p name="">飞来山上千寻塔</p>
<p name="">闻说鸡鸣见日升</p>
<p name="">不畏浮云遮望眼</p>
<p name="">自缘身在最高层</p>
<form>
<input type="text">
<input type="password">
<input type="submit">
</form>
</body>
</html>
执行结果如下：
|
窥视卡
雷达卡
发表于 2023-1-31 20:05:23
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 13:25:42
