简介CSS中的各种选择符

类型，类和ID选择器

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

1. th,td {   
2.     padding:0 10px 00;   
3. }  

    选项的优先级

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

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

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

    后代选择器

1. div.planet table td {   
2.     padding:0 10px 0 0;   
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="hh jj"]{...}  

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

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

4. //被访问过的链接

UI伪类
链接伪类

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

focus伪类——鼠标放在上面

1. input:focus {border:1px solid blue;}  

target伪类

1. <a href="#more_info">More Information</a>     
2. //位于页面其他地方、ID 为 more_info 的那个元素就是目标。该元素可能是这样的：   
3.   
4.   
5. <h2 id="more_info">This is the information you are looking for.</h2>   
6.   
7.   
8. //那么，如下 CSS 规则   
9. #more_info:target {background:#eee;}  

结构化伪类