CSS 之 選擇器

選擇器

類型選擇器

也叫作 元素選擇器和簡單選擇器，能夠根據元素標籤指定樣式。

p {
color:red;
}

類選擇器

通常用於某些同類型的樣式。

.xxxClass{
}

<div class="xxxClass"></div>

ID選擇器

爲特殊的元素，指定類型

#xxxId{
}

<div id="xxxId"></div>

後代選擇器

在某個選擇器後，選擇指定規則的後代，爲其指定樣式

div p {
}

僞類選擇器

爲某些特殊的元素，在某些條件時，指定樣式。
好比，連接的link和visited ;
以及其餘元素的hover,focus,active等。

a:link, a:visited {}
a:hover, a:focus, a:active {}

通用選擇器

相似通配符的做用，好比全部可用元素添加樣式。

*{}

高級選擇器

子選擇器

後代選擇器是選擇全部的後代，子選擇器則能夠選擇元素的直接後代，即子元素。

#nav>li{}

相鄰選擇器

#nav + p {}

屬性選擇器

好比爲tooltip添加樣式

acronym[title]{}

樣式層疊

因爲選擇同一個元素能夠經過不一樣的方法，好比元素的後代、或者類、或者ID，那麼就可能形成樣式的重疊。所以可使用!important,增長樣式的優先級。

樣式特殊性

再說到樣式的重疊的另外一種狀況，若是不一樣的方式都指定了樣式，到底會優先使用哪種呢？
這就須要瞭解特殊性了，從上到下 依次爲：

style=""
#xxx{}
.class{}
body div{}
div{}

即，元素上的style會優先、其次是使用ID選擇器、而後是類選擇器、後代選擇器、最後是類型選擇器

樣式的繼承

樣式是能夠繼承的，好比給body增長樣式，那麼頁面中body內的全部元素都會應用這個樣式。

樣式的引用

樣式的引用由兩種方式，一種是經過連接link，另外一種則是style的導入的方式：

<!-- <link rel="stylesheet" type="text/css" href="test.css"> -->
    <style type="text/css">
    /*slow*/
    @import url("test.css");
    </style>

相比較來講，link的方式要更快一些。

另外，仍是推薦把CSS都放在同一個文件中。由於瀏覽器加載樣式文件，是受瀏覽器的限制的，有的瀏覽器只支持同時下載3個文件、有的支持8個...
若是由三個文件，而瀏覽器只能同時下載2個文件，那麼第三個就必需要等到前兩個下載完後，才能加載。
所以，放在一個文件中會更快的加載。

若是把全部的CSS都放在一個文件，又可能致使文件過於龐大，不易維護。所以有如下幾個建議：

• 完善註釋信息
• 對樣式進行分組，並寫入相應的註釋，能夠加快定位
• 發佈時，能夠考慮對文件進行壓縮，好比刪除註釋、刪除空白、壓縮。目前不少的瀏覽器都支持從壓縮包中下載文件，這樣能夠有效的減小文件體積。

暫時也就整理這麼多吧！後續再補充....