一. 什麼是标簽選擇器？
1.作用： 根據指定的标簽名稱，在目前界面中找到所有該名稱的标簽，然後設定屬性。
2.格式
标簽名稱 {
屬性:值;
}
3.注意點：
1）标簽選擇器選中的是目前界面中所有的的标簽，而不能單獨選中某一個标簽。
2）标簽選擇器無論标簽藏得有多深都能選中
3）隻要是HTML中的标簽就可以使用标簽選擇器（h/a/img/ul）
二. 标簽選擇器之 id 選擇器
1.什麼是id選擇器 ： 根據指定的id名稱找到對應的标簽，然後設定屬性。
2.格式
# id名稱{
屬性 : 值 ;
}
例如：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>id選擇器練習</title>
<style>
/*對body裡面的id名稱叫做box的盒子進行設定*/
#box{
width: 500px;
height: 300px;
color: skyblue;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
3.注意點
1）每個HTML标簽都有一個屬性叫做id，也就是說每個标簽都可以設定id
2）在同一個界面中id的名稱是不可以重複的。
3）在編寫id選擇器是一定要在前面加上一個#
4）id的名稱隻能由字母/數字/下劃線組成，且id的名稱不能以數字開頭。
5）在企業開發中，一般情況下如果僅僅是為了設定樣式。我們不會使用id，因為在前端開發中id是留給js使用的。
三. 标簽選擇器之類選擇器
1.什麼是類選擇器？：根據指定的類名稱找到對應的标簽，然後設定屬性。
2.格式：
.類名 {
屬性 : 值 ;
}
例如：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>選擇器練習</title>
<style>
/*對body裡面的class名稱叫做box的盒子進行設定*/
.box{
width: 500px;
height: 300px;
color: skyblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.注意點：
1）每一個HTML标簽有一個屬性叫做class，也就是每一個标簽都可以設定類名。
2）在同一個界面中，class的名稱是可以重複的。
3）在編寫class選擇器時，一定要在class名稱前面加上.
4）類名的命名規則和id名稱的規則一樣。
5）類名就是專門給某個特定的标簽設定樣式的。
6）在HTML中每一個标簽都可以多個類名。
-格式
<标簽名稱 class=“類名1 類名2”>
四. 标簽選擇器之後代選擇器
1.什麼是後代選擇器？: 找到指定标簽所有後代标簽，設定屬性。
2.格式
标簽名稱1 标簽名稱2{
屬性:值;
}
例如：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>選擇器練習</title>
<style>
/*遊覽器先找到class名稱為box的div盒子，然後選中裡面的所有p标簽，既box裡面的我是一個段落1，我是一個段落2，我是一個段落3，我是一個段落4都會被選中。*/
.box p{
font:italic bold 15px "新宋體";
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<p>我是一個段落2</p>
<div class="box2">
<p>我是一個段落1</p>
</div>
</div>
<div class="box1">
<p>我是一個段落3</p>
</div>
<div class="box1">
<p>我是一個段落4</p>
</div>
</div>
</body>
</html>
3.注意點：
1）後代選擇器必須用空格隔開
2）後代不僅僅是兒子，還包括孫子/重孫子，隻要最終是放在指定标簽中
的都是後代。
3.後代選擇器不積極可以使用标簽名稱，還可以使用其他選擇器。
五. 子元素選擇器
1.什麼是子元素選擇器：找到指定标簽中所有特定的直接子元素，然後設定屬性。
2.格式
标簽名稱1>标簽名稱2{
屬性:值;
}
先找到名稱叫做“标簽名稱1”的标簽，然後在這個标簽中查找所有直接子元素名稱叫做“标簽名稱2”的元素。
例如：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>選擇器練習</title>
<style>
/*遊覽器先找到class名稱為box的div盒子，然後選中裡面的所有p标簽，既box裡面的我是一個段落4會被選中，其他的p标簽包裹的内容不會被選中。*/
.box p{
font:italic bold 15px "新宋體";
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<p>我是一個段落2</p>
<div class="box2">
<p>我是一個段落1</p>
</div>
</div>
<div class="box1">
<p>我是一個段落3</p>
</div>
<p>我是一個段落4</p>
</div>
</body>
</html>
3.注意點：
1）子元素選擇器隻會查找兒子，不會查找其他被嵌套的标簽。
2）子元素選擇器之間需要用>連接配接，并且不能有空格。
3）子元素選擇器不僅僅可以使用标簽名稱，還可以使用其他選擇器。
六. 交集選擇器
1.什麼是交集選擇器？：給所有選擇器選中的标簽中，相交的那部分标簽設定屬性。
2.格式
選擇器1選擇器2{
屬性:值;
}
例如：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>選擇器練習</title>
<style>
/*遊覽器先找到所有的p标簽，然後在找到class名為box1的p标簽。然後看相交的那一部分，進行樣式修改，即我是一個段落3，我是一個段落4會被修改樣式，其他的不會被修改樣式*/
p.box1{
font:italic bold 15px "新宋體";
}
</style>
</head>
<body>
<div class="box">
<p>我是一個段落1</p>
<p>我是一個段落2</p>
<p class="box1">我是一個段落3</p>
<p class="box1">我是一個段落4</p>
<p>我是一個段落5</p>
</div>
</body>
</html>
3.注意點：
1.選擇器與選擇器之間沒有任何連接配接符号
2.選擇器可以使用标簽名稱/id名稱/class名稱
3.交集選擇器僅作為了解，企業開發過程中用的并不多。
七. 并集選擇器
1.什麼是并集選擇器？：給所有選擇器選中的标簽設定屬性。
2.格式
選擇器1，選擇器2{
屬性:值;
}
3.注意點
1）選擇器與選擇器之間使用逗号連接配接。
2）選擇器可以使用标簽名稱/id名稱/class名稱
八. 兄弟選擇器
1.什麼是兄弟選擇器？
1）相鄰兄弟選擇器：給指定選擇器後面僅跟着那個選擇器設定屬性
格式：
選擇器1+選擇器2{
屬性:值;
}
2）注意點：
-相鄰兄弟選擇器必須通過+連接配接
-相鄰兄弟選擇器隻能選中緊跟在其後的那個标簽，不能選中被隔開的選擇器。
2）通用兄弟選擇器：給指定選擇器後面所有的選擇器設定屬性
格式
選擇器1~選擇器2{
屬性:值;
}
注意點：
1.通用兄弟選擇器必須使用~連接配接
2.通用兄弟選擇器選中的是指定選擇器後面的某個選擇器選中的所有标簽，無論有沒有被隔開，都可以選中。
九. 序選擇器
1.CSS中新增的選擇器最具有代表性的就是序選擇器。
2.同級别的第幾個
1）frist child 選中同級别中的第一個标簽。
2）last child 選中同級别中的最後一個标簽
3）nth-child(3) 選中同級别的第三個。
4）nth-last-child(n) 選中同級别的倒數第n個。
5）only-child 選中父元素中唯一的标簽。
6）注意點：不區分類型。
3.同類型的第幾個
1）frist-of-type 選中同類型的第一個标簽。
2)frist-of-type 選中同類型的最後一個标簽。
3）nth-of-type(n) 選中同類型的第n個标簽。
4）nth-last-of-type(n) 選中同類型的倒數第n個标簽。
5）only-of-type 選中同類型的唯一的一個。
4.奇偶數選擇第幾個
1）nth-child(odd) 選中同級别的奇數标簽
2）nth-child(even) 選中同級别的偶數标簽。
3）nth-of-type(odd) 選中同類型的奇數标簽。
4）nth-of-type(even) 選中同類型的偶數标簽。
5）nth-child（2n+0） 選中同類型的第2n個标簽。
十. 屬性選擇器
1.什麼是屬性選擇器？：根據指定的屬性名稱找到對應的标簽，然後設定屬性。
2.attribute
1)作用:根據指定的屬性名稱找到對應的标簽，然後設定屬性。
2)格式：
标簽名稱[屬性名稱]{
屬性:值;
}
eg:p[id]{
}
3.attribute=value
1)作用 :根據指定的屬性名稱，并且屬性的取值等于value，然後設定屬性。
2）格式
标簽名稱[屬性名稱=value]{
屬性:值;
}
最長使用于input标簽
eg:input[type=password]{
屬性:值;
}
十一. 通配符選擇器
1.什麼是通配符選擇器？：給目前界面設定所有的标簽
2.格式
*{
屬性:值；
}
3.注意點
1）由于通配符選擇器是設定界面上所有的标簽，是以效果比較差，在企業開發的過程中，一般不會使用這個選擇器。