CSS选择器及其优先级

基本选择器

标签选择器

标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选择元素便可（如body,p,ul,ol,dl）。

类选择器

类选择以点"."开头，后面紧跟一个类名。类名不容许有空格，与元素中class属性的值保持一致。一个元素能够有多个class的值，每一个值经过空格分割开。类名相同的元素属于一类元素。

<style>
       .first{font-size:14px;}
       .done{font-weight:bold;text-decoration:line-through;}
    </style>
    <ul>
       <li class="first done">Creat an HTML document</li>
       <li class="second done">Creat a CSS style sheet</li>
       <li class="third done">Link them all together</li>
    </ul>

ID选择器

ID选择器以"#"开头，后面紧跟一个ID名，在一个文档中，ID值不能重复，所以在选择文档中惟一元素的时候该选择器比较有用。

<style>            
    #polite {font-family: cursive;}            
    #rude {
            font-family: monospace;      
            text-transform: uppercase;
           }
 </style>
 <p id="polite"> — "Good morning."</p>        
 <p id="rude"> — "Go away!"</p>

广泛选择器

使用"*"来表示广泛选择器，表示选择全部元素，一般用在组合选择器中。

<style>            
    .left-nav > * { 
                    width:200px; 
                    background-color:#fafafa
                   }
</style>
<article class="left-nav">
    <dl>                
        <dt>推荐</dt>                
            <dd class="current"><i class="icon-music"></i>发现音乐</dd>        
    </dl>            
    <dl>                
        <dt>个人音乐</dt>                                
            <dd><i class="icon-cloud-download"></i>下载的音</dd>            
    </dl>
</article>

多选择器

多个选择器并列使用，使用“,”分割
例如："div,.one,#tt" 表示选择div元素，class为one的元素以及id为tt的元素。

层次选择器

后代选择器

使用 “ ” 隔开两个选择器。例如 "ul li"表示选择ul的后代元素li，li能够为ul的直接子元素，也能够为ul的孙子元素。

子代选择器

使用 “>” 隔开两个选择器。例如 "ul>li"表示选择ul的直接子代元素li,ul的孙子元素li没法被选择到

相邻同胞元素

使用 “+” 隔开两个选择器。例如 ".one+*"表示选择class为"one"元素的下一个兄弟元素。

通常同胞选择器

使用 “~” 隔开两个选择器。例如 ".one~*"表示选择class为"one"元素的全部兄弟元素。

属性选择器（配合基本选择器进行筛选）

1. [attr] 选择具备attr属性的元素、不管该属性的值为何
2. [attr=val] 选择具备attr属性的、而且attr的值为val元素
3. [attr~=val] 选择具备attr属性的、而且attr的值之一为val的元素
4. [attr^=val] 选择具备attr属性的、而且attr的值以val开头的元素
5. [attr$=val] 选择具备attr属性的、而且attr的值以val结尾的元素
6. [attr*=val] 选择具备attr属性的、而且attr的值包含val的元素

伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中（配合基本选择器进行筛选）

子元素:

:only-child
:first-child
:last-child
:nth-child(n) 、: nth-last-child(n)
:first-of-type、:last-of-type
:nth-of-type(n)、:nth-last-of-type(n)
......
n能够为元素的序号，也能够为特殊的字符，好比“odd”，“even

元素状态相关

:hover
:active
:focus
......

伪元素选择器

伪元素以"::"开头，用在选择器后，用于选择指定的元素。
::after
::before
::first-letter
::first-line
::selection

......

选择器优先级

在全部的选择器中某个选择器定义的规则是否可以胜出（即优先级）取决于三个元素：Importance，特性值，代码顺序。

!important声明(Importance)

在css规则的值末尾添加"!important"可以保证该规则优先其余规则。可是通常建议不使用"!important",由于它会改变级联的工做方式，使得调试变得困难。

特性值

经过4个特性值来量化一个选择器

• 声明在元素的style属性中。特性值记为1000
• 包含在一个选择器中的全部ID选择器。特性值记为100
• 包含在一个选择器中的全部类选择器，属性选择器，伪类选择器。属性值记为10
• 包含在一个选择器中的全部元素选择器，伪元素选择器.属性值记为1

代码顺序

若是多个竞争选择器具备相同的重要性和特性值，代码顺序就发挥做用了，后来规则优先前面规则。