CSS-選擇器及其相容性
標籤選擇器
就是用標籤名來當做選擇器。
1 、所有標籤都能夠當做選擇器，比如body、h1、dl、ul、span等等
2 、不管這個標籤藏的多深，都能夠被選擇上。
3 、選擇的是所有的，而不是某一個。所以是共性，而不是特性。
希望頁面上所有的超級連結都沒有下劃線：
a{
/*去掉下劃線：*/
text-decoration: none;
}id選擇器（#X)
#表示選擇id，在選擇器中使用#可以用id來定位某個元素。然後使用的時候需要問自己一下：我是不是必須要給這個元素來賦值個id來定位它呢？
id
#pp{
color:black;
}(1）任何的標籤都可以有id，id的命名要以字母開頭，可以有數字、下劃線。大小寫嚴格區別，a和A是兩個不同的id。
( 2）同一個頁面內id不能重複，即使不一樣的標籤，也不能是相同的id。
也就是說，如果有一個p的id叫做p1，這個頁面內，其他所有的元素的id都不能叫做p1。
相容性
IE6+
Firefox
Chrome
Safari
Opera
類選擇器(.X)
.p {
color: red;
}總結：
( 1） class可以重複，也就是說，同一個頁面上可能有多個標籤同時屬於某一個類；
( 2） 同一個標籤可以同時攜帶多個類
這是個class
id選擇器不同的是，它可以定位多個元素。當你想對多個元素進行樣式修飾的時候就可以使用class。當你要對某個特定的元素進行修飾那就是用id來定位它。 ( 3） 不要去試圖用一個類名，把某個標籤的所有樣式寫完。這個標籤要多攜帶幾個類，共同造成這個標籤的樣式。
( 4） 每一個類要儘可能小，有“公共”的概念，能夠讓更多的標籤使用。
( 5 )儘可能的用class，除非極特殊的情況可以用id。
原因：id是js用的。也就是說，js要通過id屬性得到標籤，所以我們css層面儘量不用id，要不然js就很彆扭。另一層面，我們會認為一個有id的元素，有動態效果。
相容性
IE6+ Firefox Chrome Safari Opera
後代選擇器( X Y)
<style type="text/css">
.div1 p{
color:red;
}
</style>空格就表示後代，.div1 p 就是.div1的後代所有的p。
強調一下，選擇的是後代，不一定是兒子。
空格可以多次出現。
.div1 .li2 p{
color:red;
}選擇的就是.div1裡面的後代.li2裡面的p。
當要把某一個部分的所有的什麼內容，進行樣式改變，就要想到後代選擇器。
相容性
IE6+
Firefox
Chrome
Safari
Opera
交集選擇器
h3.special{
color:red;
}選擇的元素是同時滿足兩個條件：必須是h3標籤，然後必須是special標籤。
交集選擇器沒有空格。所以有沒有空格div.red和div .red不是一個意思。
注意：交集選擇器，我們一般都是以標籤名開頭，比如div.haha 比如p.special。
並集選擇器（分組選擇器）
h3,li{
color:red;
}用逗號就表示並集。
兒子選擇器(X>Y)
IE7開始相容，IE6不相容。
div>p{
color:red;
}div的兒子p。和div的後代p的截然不同。
能夠選擇：
<div>
<p>我是div的兒子</p>
</div>不能選擇：
<div>
<ul>
<li>
<p>我是div的重孫子</p>
</li>
</ul>
</div>例如
div#container > ul {
border: 1px solid black;
}X Y和X > Y的差別就是後面這個指揮選擇它的直接子元素。看下面的例子：
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>#container > ul只會選中id為’container’的div下的所有直接ul元素。它不會定位到如第一個li下的ul元素。
由於某些原因，使用子節點組合選擇器會在效能上有許多的優勢。事實上，當在javascript中使用css選擇器時候是強烈建議這麼做的。
相容性
IE7+
Firefox
Chrome
Safari
Opera
序選擇器
選擇第1個li：
<style type="text/css">
ul li:first-child{
color:red;
}
</style>選擇最後一個1i：
ul li:last-child{
color:blue;
}由於瀏覽器的更新需要過程，所以現在如果公司還要求相容IE6、7，那麼就要自己寫類名：
<ul>
<li class="first">專案</li>
<li>專案</li>
<li>專案</li>
<li>專案</li>
<li>專案</li>
<li>專案</li>
<li>專案</li>
<li>專案</li>
<li>專案</li>
<li class="last">專案</li>
</ul>用類選擇器來選擇第一個或者最後一個：
ul li.first{
color:red;
}
ul li.last{
color:blue;
}IE8開始相容；IE6、7都不相容
下一個兄弟選擇器
+表示選擇下一個兄弟
<style type="text/css">
h3+p{
color:red;
}
</style>選擇上的是h3元素後面緊挨著的第一個兄弟。
<h3>我是一個標題</h3>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h3>我是一個標題</h3>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h3>我是一個標題</h3>
<p>我是一個段落</p>
IE7開始相容，IE6不相容。
CSS的繼承性和層疊性
繼承性
有一些屬性，當給自己設定的時候，自己的後代都繼承上了，這個就是繼承性。
能繼承的屬性：color、 text-開頭的、line-開頭的、font-開頭的。
這些關於文字樣式的，都能夠繼承； 所有關於盒子的、定位的、佈局的屬性都不能繼承。繼承性是從自己開始，直到最小的元素。
層疊性
就是css處理衝突的能力。 所有的權重計算，沒有任何相容問題！
權重問題大總結：
1） 先看有沒有選中元素，如果選中了，那麼以（id數，類數，標籤數）來計權重。誰大聽誰的。如果都一樣，聽樣式後寫的為準。
2） 如果沒有選中，那麼權重是0。如果大家都是0，就近原則。
下列都是IE6相容的選擇器：
p
#box
.spec
div.box
div .box
div , .box
*
下列都是IE7開始相容：
div>p
div+p下列都是IE8開始相容：
div p:first-child
div p:last-child