03. CSS 選擇器

<!DOCTYPE html>
<html>
<head>
<style>
.center{
    text-align:center;
}
.col{
    color:red;
}
.font{
    font-size:18px;
    font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<h1 class="center">class 選擇器</h1>
<p class="center col">我是一個段落。</p>
<p class="center font">我是另外一個段落。</p>
</body>
</html>

實例：全部的 p 元素使用 class="center"，讓該元素的文本居中

<!DOCTYPE html>
<html>
<head>
<style>
.center{
    color:blue;
}
p.center{
    text-align:center;
}
p.col{
    color:red;
}
.font{
    font-size:18px;
    font-weight:bold;
    font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<h1 class="center col">class 選擇器</h1>
<p class="center col">我是一個段落。</p>
<p class="center col font">我是另外一個段落。</p>
<h2 class="center">h2 標題</h2>
</body>
</html>

3、id選擇器

id 選擇器能夠爲標有特定 id 的 HTML 元素指定特定的樣式，id 屬性和身份證同樣具備惟一性。HTML元素以 id 屬性來設置 id 選擇器，CSS 中 id 選擇器以 "#" 來定義。

注意： id 屬性不能以數字開頭。css3

#id{
    屬性:值;
}

4、通配符選擇器

*{                
    屬性:值;
}

做用域：整個HTML頁面

5、交集選擇器

選擇器1選擇器2{
    屬性:值;
}

6、並集選擇器

多個選擇器具備相一樣式

選擇器1,選擇器2{
        屬性:值;
    }
    
    // h1, h2, h3, h4, h5, h6, p{color:red;}

7、後代選擇器

先代選擇器 後代選擇器{
    屬性:值;
}

做用於先代元素內的[全部的後代元素]；

8、子元素選擇器

父選擇器 > 子選擇器{
    屬性:值;
}

只做用於父元素內的[直接子元素]；瀏覽器
若是不但願選擇任意的後代元素，而是隻選擇某個元素的子元素，那麼就使用子元素選擇器框架

實例：把 div 元素中全部直接子元素 a 的字體設置爲紅色

<head>
<style>
div>a{
    color:red;
}
</style>
</head>
<body>
<div>
    <a href="">div 中第一個子元素 a，顯示爲紅色</a>
    <p>div 中第二個子元素 p<br/>
        <a>p 元素的子元素 a，該元素是 div 元素的孫元素</a>
    </p>
    <a href="">div 中第三個子元素 a，顯示爲紅色</a>
</div>
</body>

總結：> 做用於元素的第一代後代，空格做用於元素的全部後代

9、相鄰兄弟選擇器

伯選擇器 + 仲選擇器{
    屬性:值;
}

做用於緊接在伯元素後的[仲元素]；字體
若是須要選擇緊接在另外一個元素後的元素，並且兩者有相同的父元素，就可使用相鄰兄弟選擇器網站

實例：選取了全部位於 div 元素後的第一個 p 元素：div+p

<head>
<style>
div+p{
    background-color:red;
}
</style>
</head>
<body>
<p>body 的第一個子元素 p</p>
<div>body 的第二個子元素 div
    <p>div 中第一個子元素 p</p>
    <div>
        <p>div 中第二個子元素 div 的子元素 p</p>
    </div>
    <p>div 中第三個子元素 p，是 div 的相鄰兄弟元素，相同父級 div</p>    //紅
</div>
<p>body 的第三個子元素 p，是 div 的相鄰兄弟元素，相同父級 body</p>  // 紅
<p>body 的第四個子元素 p，是 div 的普通兄弟元素</p>
</div>
</body>

實例：選取了全部 div 元素的全部相鄰兄弟元素 p : div~p

<head>
<style>
div~p{
    background-color:red;
}
</style>
</head>
<body>
<p>body 的第一個子元素 p</p>
<div>body 的第二個子元素 div
    <div>div 元素下的第一個子元素 div</div>
    <p>div 的相鄰兄弟元素</p>
    <p>div 的普通兄弟元素</p>
    <p>div 的普通兄弟元素</p>
</div>
<p>body 下 div 的相鄰兄弟元素</p>
<p>body 下 div 的普通兄弟元素</p>
<p>body 下 div 的普通兄弟元素</p>
</body>

10、屬性選擇器

[屬性]{
    屬性:值;
}

實例：把全部帶有 title 屬性的元素的字體設置爲紅色：

<head>
<style>
[title]{
    color:red;
}
</style>
</head>
<body>
<h1>h1 標題不帶有 title 屬性</h1>
<h2 title="標題">h2 能夠設置樣式</h2>
<a href="#" title="連接">超連接能夠設置樣式</a>
</body>

標籤[屬性=值]{
    屬性:值;
}

實例：把全部 title='Hello' 的元素的字體設置爲藍色：

<head>
<style>
[title=Hello]{
    color:blue;
}
</style>
</head>
<body>
<h1 title="Hello world">h1 標題 title="Hello world"</h1>
<h2 title="Hello">h2 能夠設置樣式</h2>
<a href="#" title="Hello">超連接能夠設置樣式</a>
</body>

屬性選擇器在爲不帶有 class 或 id 的表單設置樣式時特別有用

<head>
<style>
input[type="text"]{
    width:150px;
    display:block;
    margin-bottom:5px;
    background-color:yellow;
}
input[type="button"]{
    width:120px;
    margin-top:5px;
    background-color:green;
}
</style>
</head>
<body>
<form name="input" action="demo.php" method="get">
    用戶名：<input type="text" name="user" placeholder="請輸入登陸名">
    暱　稱：<input type="text" name="name" placeholder="請輸入角色名">
    <input type="button" value="查詢">
</form>
</body>

11、僞類選擇器

選擇器:僞類{
    屬性:值;
}

(1) `<a>`超連接僞類：

a:link：未訪問的連接；url
a:visited：已訪問的連接；spa
a:hover：鼠標移動到連接；
a:active：鼠標點擊時的鏈接；

當爲連接的不一樣狀態設置樣式時，必須遵循如下順序規則：

a:hover 必須跟在 a:link 和 a:visited 後面。
a:active 必須跟在 a:hover後面。

僞類能夠與 CSS 類配合使用：選擇器.class:僞類{attr:value;}

實例：設置鼠標移動到的連接爲紅色

<head>
<style>
a.tint:hover{
    color:red;
}

</style>
</head>
<body>
<a href="#">超連接</a>
<a class="tint" href="#">超連接</a>
</body>

IE6不支持a之外其它任何標籤的僞類；

IE6以上的瀏覽器支持全部標籤的hover僞類；

(2) 位置結構僞類：

:first-child：第一個子元素；
:last-child：最後一個子元素；
:nth-child(n)：第n個元素（n=1,2,3...）；
:nth-last-child(n)：倒數第n個元素（n=1,2,3...）;
[n=odd：奇數 | n=even：偶數]

注意：

不是第一個HTML標籤，而是第一個HTML元素

html元素：文本，圖像，連接；

實例：選擇做爲任何元素的第一個子元素 p。選擇器使用 p:first-child

<head>
<style>
p:first-child{
    font-weight:bold;
    color:blue;
}
</style>
</head>
<body>
<p>第一個 p 元素</p>    // 藍
<p>第二個 p 元素</p>
<p>第三個 p 元素</p>
</body>

(3) 【CSS3】目標僞類：

/*:target 選擇器用於選取當前活動的目標元素*/
:target{
    屬性:值;
}

12、僞元素選擇器

標籤::僞元素{
    屬性:值;
}

僞元素能夠與 CSS 類配合使用

僞元素：

:first-line：向文本的首行設置特殊樣式；
- 注意：:first-line 僞元素只能用於塊級元素，下面的屬性可應用於 :first-line 僞元素
  
  ①、font
  
  ②、color
  
  ③、background
  
  ④、line-height
  
  ⑤、clear
  
  ⑥、vertical-align
  
  ⑦：text-decoration
  
  ⑧：text-transform
  
  ⑨、letter-spacing
  
  ⑩、word-spacing
:first-letter：向文本的首字母設置特殊樣式；
- 注意：:first-letter 僞元素只能用於塊級元素，下面的屬性可應用於 "first-letter" 僞元素
  
  ①、font、color、background、line-height、clear、vertical-align (only if "float" is "none")、text-decoration、text-transform
```
　　　　以上8個屬性和 :first-line 僞元素相同，除了 letter-spacing 和 word-spacing 以外。
```
  ②、float
  
  ③、margin
  
  ④、padding
  
  ⑤、border
:before：在標籤以前添加 content:新內容；

標籤::before{
    content:新內容;
    // constent:none 默認
    // constent:'string' 插入文本
    // constent:attr(屬性) 插入標籤屬性值
    // constent:url(路徑) 插入一個外部資源
}

:after：在標籤以後添加 content:新內容；

標籤::after{
        content:新內容;
    }

:selection：選中區域；

注意：多重僞元素便可以結合多個僞元素來使用

實例：段落的第一個字母將顯示爲紅色，其字體大小爲 20px。第一行中的其他文本將爲藍色，並帶有下劃線裝飾效果。段落中的其他文本將以默認字體大小和顏色顯示

<head>
<style>
p:first-letter{
    color:red;
    font-size:20px;
}
p:first-line{
    color:blue;
    text-decoration:underline;
}
</style>
</head>
<body>
<h1>The best things in life are free, like hugs, smiles, friends, kisses, family, love and good memories.</h1>
<p>The moon belongs to everyone，best things in life they're free，stars belong to everyone，they cling there for you and for me.Love can come to everyone，best things in life they're free，all of the good things，every one of the better things.</p>
<p>The best things in life are free, and the second best things are very, very expensive.</p>
</body>

十3、CSS 選擇器權值

有時候咱們爲同一個元素設置了不一樣的 CSS 樣式代碼，瀏覽器會根據權值來判斷使用哪一種 CSS 樣式，哪一種樣式權值高就使用該樣式，因此理解選擇器的特殊性很重要。

權值就是所用選擇器的特殊性，瀏覽器會根據這種特殊性來決定所定義的樣式規則的次序，具備更特殊選擇器的規則優先於具備通常選擇器的規則，若是兩個規則的特殊性相同，那麼後定義的規則優先，這一點和 JS 相同，即後面定義的會覆蓋前邊定義的。

覆蓋也就是 CSS 層疊，當有相同權重的樣式存在時，會根據這些 CSS 樣式的先後順序來決定，處於最後面的 CSS 樣式會被應用。那麼對於 CSS 樣式優先級的順序就不難理解了。

特殊性能夠分爲4個等級，每一個等級表明一類選擇器：

①、表明內聯樣式，如 <p style="color:red"></p>，權值爲 1000。

②、表明 ID 選擇器，如 #content，權值爲 100。

③、表明類，類選擇器以及僞類和屬性選擇器，如 .main，權值爲 10。

④、表明類型選擇器，標籤和僞元素選擇器，如 div p，權值爲 1。

通配符選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，因此他們的權值都爲 0。

注意：繼承也有權值的，可是繼承的權值是最低的。

每一個等級的值爲其所表明的選擇器的個數乘以這一等級的權值（好比 ④ 中例子的權值爲 2），最後把全部等級的值相加得出選擇器的特殊值。比較同一級別的個數，數量多的優先級高，若是相同即比較下一級別的個數。

權值的規則：選擇器的權值相加，大的優先；若是權值相同，後定義的優先。

權值的大小跟選擇器的類型和數量有關，樣式的優先級跟樣式的定義順序有關。

p{ /* 權值爲 1 */
    color:red;
}
p span{ /* 權值爲 1+1=2 */
    color:green;
}
.main{ /* 權值爲 10*/
    font-size:14px;
}
div p .main{ /* 權值爲 1+1+10=12 */
    color:purple;
}
#footer{ /* 權值爲 100 */
    color:gray;
}
#footer .note p{ /* 權值爲 100+10+1=111 */
    color:white;
}

最高權值

在實際的網站開發中，有些特殊的狀況須要爲某些樣式設置具備最高權值，這時候咱們可使用 !important 來解決

<head>
<style>
p{
    color:red!important;    // 權值最高，p 元素顯示紅色
}
.demo{
    color:green;
}
</style>
</head>
<body>
<p class="demo">在實際的網站開發中，有些特殊的狀況須要爲某些樣式設置具備最高權值，這時候咱們可使用 !important 來解決。</p>
</body>