CSS核心（十二）复合选择器之属性选择器--通过其它属性精确选择元素
本节内容有点绕，在以下代码中我已经努力用最容易理解的方式表达了属性选择器的各种语法，每一种语法在代码中都做了详细注释，大家可以把代码复制下来一点点的理解。<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器之属性选择器--通过其它属性精确选择元素</title>
</head>
<body>
<style>
/* 属性选择器[属性名] 以下选择器表示：选择属性名为deng的标签。选中的是第三首的标题*/
{
color:darkcyan;
}
/* [属性名=属性值] 以下选择器表示：选择name为poiuo的标签。选中的是第一首的标题*/
{
color:blueviolet;
}
/* 表示选择type为text的标签。选中的是第一个文本框，输入的内容为红色 */
{color:Red;}
/* *=表示包含。 以下选择器表示：选择name属性中包含yang这几个字母的标签。选中的是第一首的第二三句*/
{ color:red;}
/* ~=表示完整包含。以下选择器表示：选择name属性中用空格隔开的其中一个为uuu的标签。选中的是第一首的第五句 */
{ color:cornflowerblue;}
/* |=表示开头完整包含。以下选择器表示：选择name属性中用-隔开的第一个属性值为gushi的标签。选中的是第一首的第一句*/
{ color:green;}
/* ^=表示开头包含。以下选择器表示：选择name属性开头是tixi这几个字符的标签。选中的是第二首的第一二句*/
{ color:saddlebrown;}
/* $=表示结尾包含。以下选择器表示：选择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>
执行结果如下：
我真的很受启发！ ai~~受不了。。一个怕麻烦的人。。唉。。。 不知怎么的，我对电脑很感兴趣，也很想学好，但是大学里想要学到真的东西很难。我们上的课很多都没意思。真正有用的还是靠我们自己学的，所以在混乱了一 年之后我觉得是该做点什么的时候了。大学里要学习的重要工具也就是以后必备的就是外语和计算机。所以我要学编程我要学网页制作。希望大家多多帮助！！！ 不过楼上说的是数学是很重要的数学很厉害的人的思考方式一定很不同 姐姐，你倒是把题目看清楚阿！！！！！！！！111 看到这些还真是有点兴奋啊。。我想快点学。。可是不知道哪有得教啊 事实上，有一句话我非常认同：CPU是为用户服务的，不是为程序员服务的。。。非常感谢linyunjia楼主的好帖！！！ 感动啊!让我认清了方向,遗憾的是怎么怎么没在多年前就认识到这点 说的很有道理，我想我真的受益菲浅