前端學習日記（六）：css如何作用于html、css選擇器的簡單應用

一、CSS如何作用于HTML

1. 外部樣式表（ External stylesheet）【将CSS規則寫到一個以“.css”為字尾的檔案中，然後使用HTML中的标簽将 CSS檔案應用到HTML文檔中 】

   <link rel=“stylesheet” href=“style.css”>

2. 内部樣式表（ Internal stylesheet）【将CSS規則寫到<style标簽>中，在不能直接更改CSS檔案情況下，這種方式有效， 但是一般不推薦使用，修改起來不友善。 】
3. 行内樣式表（ Inline styles）【将CSS規則寫到元素的style屬性中，隻能作用與一個元素，一般不推薦使用。 】

二、選擇器

1. 标簽選擇器【标簽選擇器又叫元素選擇器，換句話說，文檔的元素就是最基本的選擇器，使用 元素名稱直接選中元素即可。】

<style>
p{
height:100px; border:1px solid red;
}
</style>
<p>one</p> 
<p>two</p> 
<p>three</p>
           

1. 類選擇器 【類選擇以點"."開頭，後面緊跟一個類名。類名不允許有空格，與元素中class屬性 的值保持一緻。一個元素可以有多個class的值，每個值通過空格分割開。類名相 同的元素屬于一類元素。】

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

1. 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>
           

1. 普遍選擇器 【使用"*”來表示普遍選擇器，表示選擇所有元素，通常用在組合選擇器中。】

<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>
           

1. 層次選擇器

   （1）後代選擇器【使用 “ ” 隔開兩個選擇器。例如 “ul li”表示選擇ul的後代元素li，li可以為ul的直接 子元素，也可以為ul的孫子元素。 】

   （2）子代選擇器【使用 “>” 隔開兩個選擇器。例如 "ul>li"表示選擇ul的直接子代元素li,ul的孫子元 素li無法被選擇到 】

   （3）相鄰同胞選擇器-下一個兄弟元素 【使用 “+” 隔開兩個選擇器。例如 ".one+乘号"表示選擇class為"one"元素的下一個兄 弟元素。 】

   （4）一般同胞選擇器-之後所有的兄弟元素 【使用 “~” 隔開兩個選擇器。例如 ".one~*"表示選擇class為"one"元素之後的所有 兄弟元素。】

2. 多選擇器

   （1）組合選擇器 【多個選擇器組合使用，使用“,”分割。 例如 “div,.one,#tt” 表示選擇div元素，class為one的元素以及id為tt的元素】

   （2）嵌套選擇器 【多個選擇器嵌套使用。例如 “div.one” 表示class為one的div元素。】

3. 屬性選擇器

   （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的元素

4. 僞類選擇器 【僞類以":"開頭，用在選擇器後，用于指明元素在某種特殊的狀态下才能被選中 】

   （1）表示子元素的

   [1] :only-child 選中獨生子元素

   [2] :first-child 第一個孩子元素

   [3] :last-child 最後一個孩子元素

   [4] :nth-child(n) 、: nth-last-child(n) 第幾個孩子元素、倒數第幾個孩子元素 ( n可以為元素的序号，也可以為特殊的字元，比如odd，even )

   [5] :first-of-type、:last-of-type 每種類型中的第一個孩子元素、最後一個孩子元素

   [6] :nth-of-type(n)、:nth-last-of-type(n) 每種類型中的第幾個孩子元素、倒數第幾個孩子元素（ n可以為元素的序号，也可以為特殊的字元，比如odd，even）

（2）元素狀态相關

[1] :link 未被通路的狀态

[2] :visited 已通路過的狀态

[3] :hover 滑鼠懸停的狀态

[4] :active 活動的狀态

[5] :focus 聚焦的狀态

[6] :enabled 可用的表單控件

[7] :disabled 禁用的表單控件

[8]:checked 使用者選中的單選按鈕和複選按鈕

[9] :default 預設選中的單選按鈕和複選按鈕

[10] :invalid、 :valid 不通過驗證的、通過驗證的

[11] :required、:optional 必填的和選填的

[12] :in-range 、:out-of-range 在範圍内的、在範圍外的