CSS3 選擇器詳解
一、CSS樣式的基本規則
（1）連結外部樣式檔案：這種方式將樣式檔案徹底與HTML，樣式檔案需要額外的引入。在這種方式下，一批樣式可以控制多分文件。
<link rel="stylesheet" type="text/css" href="Css樣式單1.css"/>（2）匯入外部樣式檔案：這種方式與上一種方式一樣。只是表達方式不一樣。
<style> @import url("Css樣式單1.css"); </style>（3）使用內部樣式檔案：通過在HTML文件頭定義樣式單部分來實現的，每批CSS只控制一份文件。
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
margin: 0;
padding: 0;
font-family: "微軟雅黑";
font-size: 60px;
background-color: paleturquoise;
}
</style> （4）使用行內樣式化：這種方式將樣式行內定義到具體的HTML元素，通常用於精確控制一個HTML元素的表現。每份CSS只控制單個HTML元素，這樣回很麻煩，維護起來很不方便，我們建議使用第一種方式。
<div class="yc" style="font-family: "微軟雅黑";font-size: 60px;background-color: paleturquoise;">
</div>（5）優先順序：行內樣式 > 內部樣式 > 連結外部樣式（匯入外部樣式）
二、CSS選擇器
我們可以通過各種選擇器來選擇到相應的元素標籤，然後來進行相應的操作。選擇器大致分為以下幾種
1. 元素選擇器
可以通過元素名來找到元素標籤進行操作，例如：
E {..........} 其中E代表有效的HTML元素名
具體例項如下：
html{
margin: 0;
padding: 0;
font-family: "微軟雅黑";
font-size: 60px;
background-color: paleturquoise;
}2. 屬性選擇器
從廣義角度看，元素選擇器就是特殊的屬性選擇器，屬性選擇器一般有以幾種語法格式：
（1）E{.......} ：指定該CSS樣式對所有的E元素起作用
（2）E[attr] {......}：指定該CSS樣式對具有
（3）E[attr = value] {......}：指定該CSS樣式對所有包含attr屬性，且attr屬性為value的E元素起作用。
（4）E[attr ~= value] {......}：指定該CSS樣式對所有包含attr屬性，且attr屬性為以空格隔開的系列值，其中某個值為value的E元素起作用。
（5）E[attr |= value] {......}：指定該CSS樣式對所有包含attr屬性，且attr屬性為以連字元隔開的系列值，其中第一個值為value的Tag元素起作用。
（6）E[attr ^= value] {......}：指定該CSS樣式對所有包含attr屬性，且attr屬性為以value開頭的字串的E元素起作用。
（7）E[attr $= value] {......}：指定該CSS樣式對所有包含attr屬性，且attr屬性為以value結尾的字串的E元素起作用。
（8）E[attr *= value] {......}：指定該CSS樣式對所有包含attr屬性，且attr屬性為為包含value的字串的E元素起作用。
其中比較常使用的是前三個，第一個我們已經實現過，我們實現下兩個選擇器：例如：
img[alt]{
width: 50px;
height: 50px;
}
img[alt = "111"]{
width: 50px;
height: 50px;
}3. ID選擇器
ID選擇器指定CSS樣式將會對具有指定id屬性值的HTML元訴求作用。ID選擇器的語法格式如下：
#idValue {......}
例項如下：
#box2 {
width: 50px;
height: 50px;
background-color: peru;
}4. Class選擇器
Class選擇器指定CSS樣式對具有指定class屬性的元素起作用。Class選擇器的語法格式如下：
[E]. classVuale {......} /*其中E是有效的HTML元素*/
.box_class{
width: 50px;
height: 50px;
background-color: palegreen;
}5. 子選擇器
子選擇器用於制定目標選擇器必須是某個選擇器對應的子元素的子元素。子選擇器的格式如下：
Selector1 > Selector2{......} /*其中Selector1和Selector2都是有效的選擇器
ul li {
font-size: 100px;
color: red;
}6. 包含選擇器
包含選擇器用於制定目標選擇器必須處於某個選擇器對應的元素內部。其語法格式如下：
Selector1 Selector2{......} /*其中Selector1和Selector2都是有效的選擇器
ul li {
font-size: 100px;
color: red;
}7. CSS3新增的兄弟選擇器
兄弟選擇器是CSS 3.0新增的一個選擇器。兄弟選擇器的語法如下：
Selector1 ~ Selector2{......} /*其中Selector1和Selector2都是有效的選擇器
.box_brother_1 ~ .box_brother_4 {
font-size: 100px;
color: red;
}8. 偽元素選擇器
為元素選擇器不是針對真正的元素使用的選擇器，偽元素選擇器只能在行業內對CSS中已有的偽元素起作用
CSS提供的偽元素選擇器有如下幾個：
:first-letter : 該選擇器對應的CSS樣式對指定物件內的第一個字元起作用
:first-line : 該選擇器對應的CSS樣式對指定物件內的第一行內容起作用
:before : 該選擇器與內容相關的屬性結合起來使用，用於在指定的物件內部的前端插入內容。
:after :該選擇器與內容相關的屬性結合起來使用，用於在指定的物件內部的尾端插入內容。
注意：冒號前後不能加空格
.box_false:first-letter{
font-weight: 900;
}
.box_false:first-line{
font-weight: 900;
}
.box_false:before{
content: DCF;
font-weight: 900;
}
.box_false:after{
content: DCF;
font-weight: 900;
}9. CSS3新增的偽類選擇器
9.1 結構性偽類選擇器
Selector : first-child : 匹配符合Selector選擇器，而且必須是其父元素的第一個子節點的元素
Selector : last-child :匹配符合Selector選擇器，而且必須是其父元素的最後一個子節點的元素
Selector : nth-child(n) : 匹配符合Selector選擇器，而且必須時期父元素的第n個位元組：odd是奇數 even 是偶數
li:first-child {
color: magenta;
}
li:last-child {
color: magenta;
}
li:nth-child(even) {
color: magenta;
}
li:nth-child(odd) {
color: magenta;
}9.2 UI元素狀態偽類選擇器
UI元素狀態偽類選擇器主要用於根據UI元素的狀態進行篩選。常用的UI元素狀態偽類選擇器有如下幾個：
（1）Selector : link : 匹配Selector 選擇器且未被訪問前的元素（通常只能是超連結）
（2）Selector : visite : 匹配Selector 選擇器且已被訪問過的元素（通常只能是超連結
（3）Selector : active : 匹配Selector 選擇器且處於被使用者啟用（通常只能是超連結
（4）Selector : hover : 匹配Selector 選擇器且處於滑鼠懸停狀態的元素
（5）Selector : focus : 匹配Selector 選擇器且且已得到焦點的元素
li:hover {
color: magenta;
}