1.元素选择器
指定的HTML元素。
2.通配选择器
* :任意HTML元素。
3.类选择器
.className :属性class值包含className的HTML元素。
3.1.多类选择器
.className1.className2 :属性class值同时包含className1和className2的HTML元素。
注意:两者之间没有空格。
《CSS权威指南》上说IE7之前的版本,都不能正确处理多类选择器。在IETester上上测试过,IE5.5、IE6、IE7+均可以正确处理。
4.ID选择器
#idValue :属性id值为idValue的HTML元素。
5.属性选择器
5.1简单属性选择
选择具有某个属性的HTML元素。
例:
h1[name] { color: red; } /*把所有含有name属性的h1元素文字设置为红色*/
h1[name][text] { color: red; } /*把所有同时含有name属性和text属性的h1元素文字设置为红色*/
5.2根据属性值匹配选择
根据给定的属性值来匹配HTML元素。
例:
a[href="http://www.baidu.com"] {color: red;}
这里的匹配是完全匹配。
5.3根据部分属性值匹配选择
有时候,属性值是个由空格分开的列表,比如说class,此时,只匹配其中的一个className。例:
[class~="a"] {color: red;} /*等价于.a*/
此外:
[foo^="bar"] 匹配所有foo属性值以bar开头的HTML元素。
[foo$="bar"] 匹配所有foo属性值以bar结尾的HTML元素。
[foo*="bar"] 匹配所有foo属性值包含bar的HTML元素。
5.4特定属性选择
例:
[lang|="en] {color: red} /*匹配所有lang属性值为“en”或以“en-”开头的元素*/
最常用的就是匹配语言值。
参考:http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp
以上五种是简单的CSS选择器,后面一篇是与HTML文档结构相关的CSS选择器。