1、类选择器:
Element.className { selectorRules }
例如:
div.note { font-size:14px; }
.dream { font-size:14px; }
2、类型选择器
Element { sRules }
Element是Html中的Element节点对象。
如:
td { font-size:14px; width:120px; }
a { text-decoration:none; }
3、Descendant Selectors(包含选择器)
Element1 Element2 { sRules }
选择所有被 Element1 包含的 Element2节点,注意中间是空格
如:
table td { font-size:14px; }
div.sub a { font-size:14px; }
4、子对象选择器
Element1 > Element2 { sRules }
选择所有作为 Element1 子对象的 Element2
例如:
body > p { font-size:14px; }
div ul>li p { font-size:14px; }
6、Attribute Selectors(属性选择器)
E [ attr ] { sRules }
选择具有 attr 属性的 E
E [ attr = value ] { sRules }
选择具有 attr 属性且属性值等于 value 的 E
E [ attr ~= value ] { sRules }
选择具有 attr 属性且属性值为一用空格分隔的字词列表,其中一个等于 value 的 E 。这里的 value 不能包含空格。
E [ attr |= value ] { sRules }
选择具有 attr 属性且属性值为一用连字符分隔的字词列表,由 value 开始的 E 。
例如:
h[title] { color: blue; }
span[class=demo] { color: red; }
div[speed="fast"][dorun="no"] { color: red; }
a[rel~="copyright"] { color:black; }
7、Grouping (分组选择器)
E1 , E2 , E3 { sRules }
选择符分组。将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。
例如:
.td1,div a,body { font-size:14px; }
td,div,a { font-size:14px; }
8、Pseudo Selectors(伪类伪对象选择器)
E : Pseudo-Classes { sRules }
E : Pseudo-Elements { sRules }
例如:
div:first-letter { font-size:14px; }
a.fly :hover { font-size:14px; color:red; }
9、Universal Selector 统配符选择器
* { sRules }
通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。假如通配选择符不是单一选择符中的唯一组成,“*”可以省略。
例如:
*[lang=fr] { font-size:14px; width:120px; }
*.div { text-decoration:none; }
2、类型选择器
3、Descendant Selectors(包含选择器)
4、子对象选择器
5、ID选择器
#ID { sRules }
以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符
例如:
#note { font-size:14px; width:120px;}
6、Attribute Selectors(属性选择器)
7、Grouping
8、Pseudo Selectors(伪类伪对象选择器)
9、Universal Selector 统配符选择器
来源:http://zhouyou.jun.blog.163.com/blog/static/100992189201142631832478/