属性选择器

在学习了经典的《 Head First HTML 与 CSS 》之后，当然要加以拓展，毕竟这本书只是把最常用的一些东西讲了一遍，真正用来排版还是有些不够用的。

　　于是我接触到了《 CSS权威指南》，有很多人推荐的书哦，当然，我也是按照当初写的学习路线一步步学习的。有计划有目标的学要比盲目的这学一点那学一点效率高不是吗？这一篇要记录我学的属性选择器的，就不废话了，下面开始。

　　还得多说一句，如果想要看到效果的话需要自己准备工具和浏览器哦，本文不放效果截图，留给爱学习的你来探索是否能看到我描述的效果。

1 h1[class]{
2     color: red;
3 }

以上语句就把所有拥有class属性的h1颜色设置为红色了~

1 a[href][title]{
2     font-weight: bold;
3 }

以上语句把同时有href和title的链接文本设置为了粗体

1 <p class="a">a</p>
2 <p class="b">b</p>

1 p[class="b"]{
2     color: red;
3 }

此时class="b"的文本"b"为红色，看上去下面这条语句效果一样，可以选择自己喜欢的方法，由于入门没有学过上面这种选择方法，我还是比较喜欢下面这种....

1 p.b{
2     color:red;
3 }

但是要注意如果一个p给了两个class值呢

1 <p class="a">a</p>
2 <p class="b">b</p>
3 <p class="b c">bc</p>

下面这样这样就会完全匹配，选择class属性值为"b c"的所有p元素，例子中使bc为红色，而其他两个p颜色为默认

1 p[class = "b c"]{
2     color: red;
3 }

还是上面给了两个class属性值的例子，如果CSS写成

1 p[class ~= "b"]{
2     color: red;
3 }

那么class值包含b的p元素文本颜色都变成红色。

"~="这个属性选项器可以用于任何属性，不仅仅是class

还有子串选择器需要记忆哦

1 [foo ^= "bar"]      /* 选择foo属性值中以"bar"开头的所有属性 */
2 [foo $= "bar"]      /* 以"bar"结尾 */
3 [foo *= "bar"]      /* 包含"bar" 不一定是完整的属性值，可以是属性值的一部分*/

突然意识到以前的笔记似乎把注释弄错了，直接打的双斜线，CSS是不识别的，以前的就不改了，今后注意！

1 img[src |= "Figure"]{
2     border: thin solid gray;
3 }

给所有 src 为 Figure 开头或 Figure- 开头的 img 加上一个边框。

end~