简介CSS中的各种选择符

类型，类和ID选择器

带有空格的字体名称要用''引起来 对选择器分组可使同一规则适用于多个选择器，例子如下

1. th,td{
2. padding:010px00;
3. }

选项的优先级

1. h1{
2. font-family:'TimesNewRoman',serif;
3. }
4. //先选用前者，没有前者，再使用后者

类型名与类名中间不应有空格 div.btn-success 通用选择器*，适用于文档所有元素

1. *{
2. font-family:Arial;
3. }

后代选择器

1. div.planettabletd{
2. padding:010px00;
3. }
4. //是类为planet的div元素的后代table的后代的td样式

万万牢记，上下文选择符以空格作为分隔符，而分组选择符则以逗号作为分隔符，不要弄混。 子选择符>

1. section>p{
2. font-style:Italic;
3. }
4. //section的子元素p

同胞选择符～和+

section ~ p { font-style:Italic;}//p在section后面就行section + p {font-style:Italic;}//p必须紧跟section

非子选择符

1. selection*a{
2. ***;
3. }
4. //所有是selection元素孙子的a元素

ID选择器

属性选择器

标签名[属性="属性值"]

1. img[title="hhjj"]{...}

伪类选择器：动态事件，状态改变

1. a:visited{
2. color:mangenta;
3. }

4. //被访问过的链接

UI伪类链接伪类

Link。此时，链接就在那儿等着用户点击。 Visited。用户此前点击过这个链接。 Hover。鼠标指针正悬停在链接上。 Active。链接正在被点击（鼠标在元素上按下，还没有释放）。

focus伪类——鼠标放在上面

1. input:focus{border:1pxsolidblue;}

target伪类

1. "#more_info">MoreInformation
2. //位于页面其他地方、ID为more_info的那个元素就是目标。该元素可能是这样的：
5. "more_info">Thisistheinformationyouarelookingfor.
8. //那么，如下CSS规则
9. #more_info:target{background:#eee;}

结构化伪类

first-child 一组同胞元素的第一个 last-child nth-child(3) 一组同胞元素的第三个

伪元素——似有实无的元素

first-letter first-line before 和 after

1. p.age::before{content:"Age:";}
2. p.age::after{content:"years.";}
3. //在类为age的p元素前面增加一段Age：
4. p::first-letter{font-size:300%;}
5. //放大p的第一个字母

继承和层叠

浏览器默认样式表 用户样式表 作者链接样式表（按照它们链接到页面的先后顺序） 作者嵌入样式 作者行内样式

越后面优先级越高

规则一：包含 ID 的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符。

规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。

规则一胜过规则二。换句话说，如果选择符更明确（特指度更高），无论它在哪里，都会胜出。

规则三：设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。下面简单解释一下规则三。比如下面的标记

Inheritance is weak in the Cascade

和下面的规则div#cascade_demo p#inheritance_fact {color:blue;}2 - 0 - 2（高特指度）会导致单词“weak”变成蓝色，因为它从父元素 p 那里继承了这个颜色值。但是，只要我们再给 em 添加一条规则em {color:red;}0 - 0 - 1 （低特指度）em 就会变成红色。因为，虽然它的特指度低（0-0-1），但 em 继承的颜色值，会被为它明确（显式）指定的颜色值覆盖，就算（隐式）遗传该颜色值的规则的特指度高（2-0-2）也没有用。