CSS札記（一）：CSS選擇器

時間 2019-12-07

標籤 css 札記選擇器欄目 CSS 简体版

原文原文鏈接

1、語法規則

選擇器{
    屬性1:屬性值1;
    屬性2:屬性值2;
    ......
}
/*註釋*/

2、如何在html中應用CSS

1. 外部引用css文件

css文件：css/layout.css（css文件夾和HTML位於同一個目錄下）
   <head>
       <link rel="stylesheet" href="css/layout.css">
   </head>

2. 內部嵌入css

<head>
    <style>
        /*css代碼*/
    </style>
    </head>

3. 元素內部使用

<div style="屬性名:屬性值;屬性名:屬性值;"></div>

3、選擇器

1. 基本選擇器

1）元素選擇器

a div body ul

2）類選擇器

.ClassName     例如: .current

3）ID選擇器

#IdName         例如: #top_nav

4）廣泛選擇器

*{
   /*css代碼*/
}

5）而且選擇器

選擇器1選擇器2
p.one#first    
<p class="one" id="first"></p>

6）並列選擇器

p,.one,#first
<p></p>
<div class="one"></div>
<ul id="first"></ul>

2. 層次選擇器

1）後代選擇器

使用空格分割兩個選擇器， 例如 【parant son】

2）子代選擇器

使用大於號分割兩個選擇器，例如 【parent > son】

3）下一個兄弟選擇器

使用+分割兩個選擇器，例如 【li:first-child + *】

4）以後全部兄弟選擇器

使用波浪線~分割兩個選擇器，例如【li:first-child ~ *】

3. 屬性選擇器(過濾器)

配合基本選擇器進行篩選
<input type="text" name="username">

selector[name]        選擇具備name屬性的元素、不管該屬性的值爲何
selector[name=val]    選擇具備name屬性的、而且name的值爲val元素
selector[name*=val]   選擇具備name屬性的、而且name的值之一爲val的元素    
selector[name^=val]   選擇具備name屬性的、而且name的值以val開頭的元素
selector[name$=val]   選擇具備name屬性的、而且name的值以val結尾的元素
selector[name~=val]   選擇具備name屬性的、而且name的值包含val的元素

4. 僞類選擇器

配合基本選擇器進行篩選

1) 子元素

:first-child
:last-child
:nth-child(n)、: nth-last-child(n) 
:first-of-type
:last-of-type
:nth-of-type(n)、:nth-last-of-type(n)

注：n能夠爲元素的序號，也能夠爲特殊的字符，好比「odd」，「even

2) 狀態

:hover、:active:、focus
:enabled、 :disabled；:checked、 :default
:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range

5. 僞元素選擇器

僞元素以"::"開頭，用在選擇器後，用於選擇指定的元素。css

::after
    經常使用於清除浮動，讓浮動的子元素將父撐起來。
    例：
        <ul id = "nav">
            <li></li>
            <li></li>
        </ul>

        #nav::after{
            content = "";
            display = block;
            clear = both;
        }

::before        
::first-letter        
::first-line        
::selection