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