第一种： E[att^=value] 属性选择器
此选择器只选择标签名称是 E 的，同时他具有att的属性，att属性值包含前缀为 value 的 子字符串 。
注：E是可以省略的，如果省略则表示匹配满足条件的任意元素
<!docty PE ht ML >
<html>
<head>
< ;m eta charset="utf-8">
<t IT le>无标题文档</title>
<style>
p[id^="one"]{
color: pink;
font-f ami ly: " 微软雅黑 ";
font- Size: 20px;
}
</style>
</head>
<body>
<p id="one">为了看日出，我常常早起。那时天还没有大亮，周围非常清静，船上只有机器的响声。</p>
<p id="two">天空还是一片浅蓝，颜色很浅。转眼间天边出现了一道红霞，慢慢地在扩大它的范围，加强它的亮光。我 知道 太阳要从天边升起来了，便转眼地望着那里。</p>
</body>
</html>结果为：
我们可以看到 id 名是 one 的文字变成了粉 红色 ，而 id 名是 two 的文字并没有发生 改变 。
第二种： E[att$=value] 属性选择器
此选择器只选择标签名称是 E 的，同时他具有att的属性，att属性值包含后缀为 value 的子字符。与 E[att^=value] 选择器一样，E元素可以省略，如果省略则表示匹配满足条件的任意元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
p[id$="1"]{
color:o CF ;
font-f am ily: " 宋体 ";
font -s ize: 30px;
}
</style>
</head>
<body>
<p id="one">盼望着，盼望着，东风来了，春天的脚步近了。</p>
<p id="two">小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟，捉几回迷藏。风轻悄悄的，草绵软软的。</p>
<p id="one1">桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着……</p>
<p id="1two">“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润湿的空气酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了……</p>
</body>
</html>
我们可以很明显的看到 id 名是 one1 的字体变大了，与 one1 相似的 1two 字体并没有变大，这是因为本选择器只有在字符串后面加上 1 的才会改变，其他的没有用。
第三种： E[att*=value] 属性选择器
此选择器只选择标签名称是E的，同时他具有att的属性，att属性值包含value子字符串。该选择器与前两种选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
p[id*="1"]{
color:greenyellow;
font-family: "宋体";
font-size: 20px;
}
</style>
</head>
<body>
<p id="one">我们消受得秦淮河上的灯影，当四月犹皎的仲夏之夜。</p>
<p id="one1"> 小的灯舫初次在河中荡漾；于我，情景是颇朦胧，滋味是怪羞涩的。我要错认它作七里的山塘；可是，河房里明窗洞启，映着玲珑入画的栏干，顿然省得身在何处了……</p>
</body>
</html>
推荐学习：CSS3视频教程
以上就是深入浅析css属性选择器的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 深入浅析css属性选择器 全部内容，希望文章能够帮你解决 深入浅析css属性选择器 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did199556