本文地址:http://www.cnblogs.com/veinyin/p/7606802.html
在学习了经典的 《 Head First HTML 与 CSS 》 之后,当然要加以拓展,毕竟这本书只是把最常用的一些东西讲了一遍,真正用来排版还是有些不够用的。
于是我接触到了 《 CSS权威指南 》,有很多人推荐的书哦,当然,我也是按照当初写的学习路线一步步学习的。有计划有目标的学要比盲目的这学一点那学一点效率高不是吗?这一篇要记录我学的属性选择器的,就不废话了,下面开始。
还得多说一句,如果想要看到效果的话需要自己准备工具和浏览器哦,本文不放效果截图,留给爱学习的你来探索是否能看到我描述的效果。
1 选择有class属性的元素
1 h1[class]{ 2 color: red; 3 }
以上语句就把所有拥有class属性的h1颜色设置为红色了~
1 a[href][title]{ 2 font-weight: bold; 3 }
以上语句把同时有href和title的链接文本设置为了粗体
2 根据具体属性选择
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 }
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是不识别的,以前的就不改了,今后注意!
4 特定属性选择
1 img[src |= "Figure"]{ 2 border: thin solid gray; 3 }
给所有 src 为 Figure 开头或 Figure- 开头的 img 加上一个边框。
end~