前端開發CSS3——使用方式和選擇器

CSS是Cascading Style Sheets（層疊樣式表）的簡寫，用於修飾文檔的語言，可以修飾HTML、XML、SVN。每個語言都有每個語法的規則：CSS聲明、CSS聲明塊、CSS選擇器、CSS規則。 1、css聲明簡單來說就是一個鍵值對的形式，類似於 color: black; 2、css ...

CSS是Cascading Style Sheets（層疊樣式表）的簡寫，用於修飾文檔的語言，可以修飾HTML、XML、SVN。每個語言都有每個語法的規則：CSS聲明、CSS聲明塊、CSS選擇器、CSS規則。

　　1、css聲明簡單來說就是一個鍵值對的形式，類似於　　color: black;

　　2、css聲明塊就是用大括弧{}括起若幹個css聲明，類似於　　{color: black; background-color: white;}

　　3、css選擇器就是某個或者一組標簽的標識，類似於　　p、div

　　4、css規則就是前面三個的總結，類似於　　p{color: black; background-color: white;}

　　註意：css的註釋是/* 這裡是註釋內容 */

我們雖然知道css的規則了，怎麼將css規則用於修飾被修飾的文檔。xml文件和svn文件博主也不知道也沒有深度的瞭解，這裡只講述HTML文件怎麼引入css文件。html文件引入css文件有三種方式：

　　1、外部樣式表

　　　　外部樣式表的引入方式有兩種情況，link標簽方式引入效率高，一般是用到哪個標簽就導入哪個標簽；@import方式和style方式效率不高，瀏覽器會全部讀取樣式表的樣式。

　　　　　　link標簽引入（推薦）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樣式表的引入方式</title>
    <link rel="stylesheet" href="./css/select1.css">
</head>
<body>
    <p>這是一個p標簽</p>
</body>
</html>

　　　　　　@import url()引入只能寫在style標簽里的第一行，否則導入不成功：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樣式表的引入方式</title>
    <!-- <link rel="stylesheet" href="./css/select1.css"> -->
    <style>
        @import url("./css/select1.css")
    </style>
</head>
<body>
    <p>這是一個p標簽</p>
</body>
</html>

　　2、內部樣式表

　　　　在html文件樣式直接寫在style標簽中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樣式表的引入方式</title>
    <style>
        p{
            height: 80px;
            width: 500px;
            font-size: 20px;
            text-align: center;
            border: 2px solid black;
            margin: 10px;
            line-height: 80px;
        }
    </style>
</head>
<body>
    <p>這是一個p標簽</p>
</body>
</html>

　　3、行內樣式表

　　　　直接寫在當前的標簽中，用style屬性列舉起來，類似於　　<p style="color: black; background-color: white;"></p>

　　這四種引入方式也是有順序的（相對於共同屬性而言）優先取行內樣式表，如果style標簽中有@import 和 style里樣式，就什麼樣式都不會有，不允許同時導入；如果既有style標簽引入有link標簽引入，就取後來引入的即可。這裡不做測試

CSS的選擇器有很多種，可以分為如下幾種，個別選擇器會舉例說明

　　1、標簽選擇器

　　　　標簽選擇器又叫元素選擇器，換句話說，HTML文檔的元素/標簽就是最基本的選擇器，使用元素名稱直接選中元素即可。

　　　　　　p{color:balck; background-color: white;}

　　2、類選擇器

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

　　　　　　.classname{color:balck; background-color: white;}

　　3、ID選擇器

　　　　ID選擇器以"#"開頭，後面緊跟一個ID名，在一個HTML文檔中，元素/標簽ID值能重覆，HTML文檔只能識別第一次出現的ID值，因此在選擇文檔中唯一元素的時候該選擇器比較有用。

　　　　　　#idname{color:balck; background-color: white;}

　　4、普遍選擇器

　　　　使用"*”來表示普遍選擇器，表示選擇所有元素/標簽，通常用在組合選擇器中。

　　　　　　*{color:balck; background-color: white;}

　　5、後代選擇器

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

　　6、子代選擇器

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

　　7、相鄰同胞選擇器

　　　　使用 “+” 隔開兩個選擇器。例如 ".one+*"表示選擇class為"one"元素的下一個兄弟（相鄰兄弟）元素，如果用其他選擇器代表 * ，那麼這個選擇器的樣式就只會找“.one”元素相鄰元素且指定選擇器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樣式表的引入方式</title>
    <link rel="stylesheet" href="./css/select1.css">
    <style>
        p+span{
            /*指定下一個相鄰的選擇器為span標簽*/
            color: red;
        }
    </style>
</head>
<body>
    <!-- 不會選中div選擇器 -->
    <p>這是一個p標簽</p>
    <div>
        <!-- 不會選中h5選擇器 -->
        <p>p1</p>
        <h5>h511</h5>
        <span>span1</span>
        <span>span2</span>
        <a href="">a1</a>
        <a href="">a2</a>
        <p>p2</p>
        <!-- 會選中 -->
        <span>span3</span>
    </div>
</body>
</html>

　　8、一般同胞選擇器

　　　　使用 “~” 隔開兩個選擇器。例如 ".one~*"表示選擇class為"one"元素的所有兄弟元素，可以指定具體的選擇器，就會選擇當前元素的所有指定選擇器的兄弟元素。

　　9、多選擇器

　　　　多個選擇器併列使用，使用“,”分割。

　　　　　　.classname, #idname, p{color:balck; background-color: white;}

　　10、組合選擇器

　　　　多個選擇器組合使用。例如 "div.one" 表示class為one的div元素。

　　11、屬性選擇器

　　　　[attr] 選擇具有attr屬性的元素、無論該屬性的值為什麼

　　　　[attr=val] 選擇具有attr屬性的、並且attr的值為val元素

　　　　[attr~=val] 選擇具有attr屬性的、並且attr的值之一為val的元素

　　　　[attr^=val] 選擇具有attr屬性的、並且attr的值以val開頭的元素

　　　　[attr$=val] 選擇具有attr屬性的、並且attr的值以val結尾的元素

　　　　[attr*=val] 選擇具有attr屬性的、並且attr的值包含val的元素

　　12、偽類選擇器

　　　　偽類以":"開頭，用在選擇器後，用於指明元素在某種特殊的狀態下才能被選中

　　　　表示子元素的（表示當前元素是作為孩子元素）

　　　　　　 :only-child 獨生子元素

　　　　　　 :first-child　　第一個孩子　　這裡是先指明第一個孩子，然後再指定選擇器

　　　　　　 :last-child 　　最後一個孩子　　這裡是先指明最後一個孩子，然後再指定選擇器

　　　　　　 :nth-child(n) 、: nth-last-child(n)　　第幾個孩子、倒數第幾個孩子

　　　　　　　　n可以為元素的序號，從1開始，也可以為特殊的字元，比如奇數“odd”，偶數“even”

　　　　　　:first-of-type、:last-of-type 、

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

　　　　　　　　n可以為元素的序號，從1開始，也可以為特殊的字元，比如奇數“odd”，偶數“even”

　　　　當前元素狀態相關

　　　　　　:hover、 :active、 :focus　　滑鼠懸停、滑鼠點擊、元素聚焦

　　　　　　:enabled、 :disabled；:checked、 :default　　元素可用、不可用、選中（適用於radio和checkbox的input標簽）、預設值

　　　　　　:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range　　元素無需驗證、需要驗證、必填、可選的、範圍內、不在範圍內

　　13、偽元素選擇器

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

　　　　　　::after 在當前元素之後添加內容

　　　　　　::before　　在當前元素之前添加內容

　　　　　　::first-letter　　當前元素的第一個字元

　　　　　　::first-line　　當前元素的第一行

　　　　　　::selection　　當前元素用戶選中的字元

如果css樣式表中的多個樣式選中同一個元素時，呈現的效果是由於哪個樣式決定的呢？其實CSS還有一個名字叫級聯樣式表，即解析的時候會根據級聯決定HTML文檔元素的呈現效果。css給每個選擇器賦值一個特性值。

　　1、如果在某個選擇器里屬性值後面添加了 !important表示這個選擇器最重要

　　2、通過4個特性值來量化一個選擇器（多個選擇器合在一起，特性值也會疊加的）

　　　　Thousands

　　　　　　• 聲明在元素的style屬性中。特性值記為1000

　　　　Hundreds

　　　　　　• 包含在一個選擇器中的所有ID選擇器

　　　　Tens

　　　　　　• 包含在一個選擇器中的所有類選擇器，屬性選擇器，偽類選擇器

　　　　Ones

　　　　　　• 包含在一個選擇器中的所有元素選擇器，偽元素選擇器

　　3、如果多個競爭選擇器具有相同的重要性和特性值，代碼順序就發揮作用了，後來規則優先前面規則。

　　4、繼承（Inheritance）

　　　　CSS中有些規則將會預設被子元素繼承，有些則不會。比如font系列屬性，文本系列屬性、列表系列屬性，cursor

　　　　CSS提供了三個特殊的值用來處理繼承

　　　　　　1) inherit 繼承父元素的樣式（常用）

　　　　　　2) initial 不繼承。應用瀏覽器的預設樣式（不常用）

　　　　　　3) unset 不設定，表現該規則本來特性，即如果該規則具有繼承屬性則繼承，否則不繼承。（不常用）