初識css與css選擇器
前面總結完了html部分的基礎內容之後，我總結了一下一下css部分的內容，希望對大家有所幫助~
初識CSS
• css的全稱為cascading style sheet 層疊樣式表，它的主要作用是為我們的html標籤新增各種各樣的樣式和修飾效果。
• 這裡我總結的css屬於css2.0的知識點，css3.0的知識我打算在後面的文章裡面總結。
• 其實html+css部分的知識點總共站前端的知識總量的1%-2%，但是卻佔了20%-30%的重要度，所以我們一定不能輕視html和css。(這是針對最近網上有很多人學習前端忽視html和css說的…)
首先我們要介紹一下，html頁面如何引入我們的css樣式
css的引入方式一共有4種：
1.行間樣式 直接在html 的標籤裡面寫style屬性 前面兩篇裡面的更改標籤的樣式都是用的這一種方式
2.頁面級css 在head標籤裡面新增一個style標籤
<style type=”text/css”></style>
這裡的style標籤的type要不不寫，不然就要寫正確，只要書寫錯誤，這個樣式就不會生效。
3.外部css檔案 <—我們選擇這種方式
我們在外面建立一個.css字尾的檔案，然後在html裡面引入這個外部的css檔案即可。
在head標籤裡面加上一個link標籤。
<link rel=”stylesheet” href=””>
• link標籤裡面的href屬性上寫我們建立的css檔案的地址，最好用相對地址的形式。
我們為什麼要選擇這種載入方式？
因為link載入不會阻塞html的載入，html和css屬於非同步載入
4.import方式引入(已經棄用)
在head標籤裡面寫一個style標籤，在第一行寫上@import url();url裡面寫上css檔案的地址，可以加引號也可以不加引號。
這種引入方式有幾種缺點導致它現在被廢棄使用：
1.必須寫在第一行
2.ie6的環境下，只能使用最多31次，這個數字據說是阿里的開發人員一點一點測試出來的。
3.程式讀到import的時候，會忽略掉import，等到html裡面的所有內容包括圖片在內的所有資源全都載入完之後才載入import的css檔案，也就是說，import引入的css檔案和html的載入是同步進行的。
• 這裡有一點不得不說明的是，link標籤引入和style標籤修改樣式二者之間並沒有什麼優先順序，誰寫在前面誰就先執行，寫在後面的css檔案會覆蓋掉前面的css檔案。有時候會因為網速問題，link寫在上面，但是link還沒有載入進來，所以先運行了後面的style，這種問題是網速導致的，並不是二者本身擁有優先順序的問題。
介紹完了如何引入css檔案之後，我們再來介紹一下css選擇器的知識
• css選擇器的作用是讓我們找到我們想要修改樣式的元素，然後為其修改樣式。
我們的選擇方式有很多種：
1.id選擇器
我們給元素新增一個id屬性，這個id是唯一標識，一個元素只能有一個id，一個id也只能給一個元素。然後我們在css檔案中，通過#id {}的方式，就可以選擇到我們新增id的那個元素了。
<div id=”demo”></div>
CSS; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
2.class類選擇器
在元素的屬性中寫一個叫做class的屬性，這個屬性是為這個元素新增一個類名，每一個元素可以有多個類名，同一個類名也可以賦給很多個元素。然後我們在css檔案中，通過.class {} 的方式來選擇出添加了類名的元素。
<div class=”demo”></div>
CSS; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
3.標籤選擇器
div{} 只要是div的標籤就會被選擇出來。
• 這裡有一個很重要的程式設計思想：我們先寫css在寫html，是我們自己在創造標籤，而如果我們現在html再寫css的話，是我們在新增樣式。比如：我們在em加上font-weight: bold;的樣式，這樣我們就創造了一個加粗斜體的標籤。
4.萬用字元選擇器 {} 所有的標籤都會被選擇出來加上樣式，body標籤頁包含在內。所以如果{background-color: red}的話，那麼整個頁面都會變紅，因為我們同時給body元素也添加了背景顏色。
• 我們在單獨的樣式後面加上 !important之後，這個樣式就會被賦予最高階的優先順序，在沒有特殊情況下，後面怎麼新增樣式都不會覆蓋或者修改這個樣式。比如：background-color: red !important;沒有特殊情況的話後面怎麼加樣式都是紅色的。
5.屬性選擇器
[id] {} 這樣有id屬性的標籤就都會被選擇出來。
我經過測試發現：
優先順序 !important > 行間樣式 > id > class|屬性 > 標籤 > *
但是我們不必背這些東西，我們只需要記住他們每一種選擇器的權重值就可以了。
• 值得一提的是，在數學中無窮大+1依然是無窮大，但是在css選擇器的權重值裡面，無窮大+1 > 無窮大。
有了權重值 我們就可以瞭解父子選擇器了
6.父子選擇器 （派生選擇器）
div p {}
給div下面的p加樣式 這時候的p的權重值是加和的結果。
• 在實際開發中，我們因為要注意瀏覽器尋找時候的耗能，一般父子選擇器不超過4層。
.wrapper .box .content .name 一般不超過像這樣的四層。
7.直接子元素選擇器
div>strong
div直接子元素裡面的strong，div的子元素裡面的不是div的直接子元素的strong就不符合要求。
<div>
<strong></strong>
</div>
√
<div>
<em>
<strong></strong>
</em>
</div>
×
id和class也是可以使用父子選擇器的喲~
8.並列選擇器
<p class=”select”></p>
<div class=”select”></div>
怎麼選擇出類名是select的div呢？
我們可以使用div.select {} 來選擇出來
這種方式是隻有div和.select同時作用在一個標籤上的時候才會被選擇出來，書寫的時候標籤名放在前面，其他的放在後面。
9.分組選擇器
<p></p>
<strong></strong>
<em></em>
<div></div>
我們要想同時給四種標籤都加上color: red的樣式，不可能把四個標籤都寫一遍樣式，因此要用分組選擇器。
div, p, em, strong {} 這樣的寫法，我們可以把前面寫的所有的標籤都選擇出來加上樣式，中間是用逗號連線的。這個樣子四種標籤就全都被選擇出來並且都加上了統一的樣式。
最後有一個很重要的問題，那就是父子選擇器的時候瀏覽器是怎麼檢索的？
div p strong em span 這樣的選擇器，瀏覽器是怎麼找的？是從左往右，還是從右往左？
答案是從右往左喲~
這是為什麼呢？
• 因為如果是從左往右尋找的話，每找到一個父級標籤，都要把它下面的所有標籤都遍歷一遍，看看有沒有我們下一個標籤，上面那個選擇器中，瀏覽器會先找到div這個標籤，然後把div下面所有的子元素都遍歷一遍後，找到strong這個標籤，然後再把strong這個標籤下面的所有元素遍歷一遍，找到em這個標籤，以此類推，這樣是十分消耗效能並且速度非常慢的。
• 而如果是從右往左的話，那麼瀏覽器只需要先找到span標籤，然後從span這個節點向上尋找，只要找到em就可以停止尋找，以此類推，不必遍歷所有的節點，而且需要遍歷的點非常的少，這樣的好處顯而易見，速度非常快，而且不耗效能。
最後有一些需要說
• 我們一般不給標籤加id，而是通過新增class類名來選擇的，因為id代表唯一標示，我們一般用id來做標記，後臺的php會提取出來id，然後換成他們的標記，因此可能會導致我們的選擇器選擇不出來我們想要的標籤。
• 我們寫類名的時候，一定要注意語義化，要符合語義化標準，要用英文單詞去命名，而不是用看不懂的abc之類的類名。
希望以上的知識會對大家有所幫助喲~