1. CSS選擇器作用
如上圖所以轧邪，要把里面的小黃人分為2組，最快的方法怎辦鳞上？
很多琳水， 比如 一只眼睛的一組肆糕，剩下的一組
選擇器的作用
? 找到特定的HTML頁(yè)面元素
**CSS選擇器干啥的般堆？ 選擇標(biāo)簽用的， 把我們想要的標(biāo)簽選擇出來 ** 必須記住的
css 就是 分兩件事擎宝， 選對(duì)人郁妈， 做對(duì)事。
h3 {
color: red;
}
這段代碼就是2件事绍申， 把 h3選出來噩咪， 然后 把它變成了 紅色。 以后我們都這么干极阅。
選擇器分為基礎(chǔ)選擇器和 復(fù)合選擇器胃碾，我們這里先講解一下 基礎(chǔ)選擇器。
2. CSS基礎(chǔ)選擇器
2.1 標(biāo)簽選擇器
-
概念：
標(biāo)簽選擇器（元素選擇器）是指用HTML標(biāo)簽名稱作為選擇器筋搏，按標(biāo)簽名稱分類仆百，為頁(yè)面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。
語(yǔ)法：
標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
-
作用：
標(biāo)簽選擇器 可以把某一類標(biāo)簽全部選擇出來 比如所有的div標(biāo)簽 和 所有的 span標(biāo)簽
-
優(yōu)點(diǎn)：
是能快速為頁(yè)面中同類型的標(biāo)簽統(tǒng)一樣式
-
缺點(diǎn)：
不能設(shè)計(jì)差異化樣式奔脐。
總結(jié) 口訣：
標(biāo)簽選擇器俄周，
頁(yè)面同選起。
直接寫標(biāo)簽髓迎，
全部不放棄峦朗。
思考： 如果想要差異化選擇不同的標(biāo)簽，怎么辦呢排龄？ 就是說 我想單獨(dú)選一個(gè)或者某幾個(gè)標(biāo)簽?zāi)兀?2.2 類選擇器
類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)波势，后面緊跟類名.
-
語(yǔ)法：
- 類名選擇器
.類名 {
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}
- 標(biāo)簽
<p class='類名'></p>
-
優(yōu)點(diǎn)：
- 可以為元素對(duì)象定義單獨(dú)或相同的樣式。 可以選擇一個(gè)或者多個(gè)標(biāo)簽
-
注意
- 類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)橄维，后面緊跟類名(自定義尺铣，我們自己命名的)
- 長(zhǎng)名稱或詞組可以使用中橫線來為選擇器命名。
- 不要純數(shù)字争舞、中文等命名凛忿， 盡量使用英文字母來表示。
命名規(guī)范： 見附件（Web前端開發(fā)規(guī)范手冊(cè).doc）
命名是我們通俗約定的竞川，但是沒有規(guī)定必須用這些常用的命名店溢。
-
記憶口訣
差異化選擇
一個(gè)或多個(gè)
上面點(diǎn)定義
類名別寫錯(cuò)
誰(shuí)用誰(shuí)調(diào)用
class來做。嘿嘿流译，工作類最多逞怨。
案例：
<head>
<meta charset="utf-8">
<style>
.blue {
color: blue;
font-size: 100px;
}
.red {
color: red;
font-size: 100px;
}
.orange {
color: orange;
font-size: 100px;
}
.green {
color: green;
font-size: 100px;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
2.3 類選擇器特殊用法- 多類名
我們可以給標(biāo)簽指定多個(gè)類名者疤，從而達(dá)到更多的選擇目的福澡。
注意：
- 各個(gè)類名中間用空格隔開。
- 多類名選擇器在后期布局比較復(fù)雜的情況下驹马，還是較多使用的革砸。
<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>
2.4 id選擇器
id選擇器使用#進(jìn)行標(biāo)識(shí)除秀，后面緊跟id名
-
其基本語(yǔ)法格式如下：
- id選擇器
#id名 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
- 標(biāo)簽
<p id="id名"></p>
元素的id值是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素算利。
用法基本和類選擇器相同册踩。
id選擇器和類選擇器區(qū)別
- W3C標(biāo)準(zhǔn)規(guī)定，在同一個(gè)頁(yè)面內(nèi)效拭，不允許有相同名字的id對(duì)象出現(xiàn)暂吉，但是允許相同名字的class。
- 類選擇器（class） 好比人的名字缎患， 是可以多次重復(fù)使用的慕的， 比如 張偉 王偉 李偉 李娜
- id選擇器 好比人的身份證號(hào)碼， 全中國(guó)是唯一的挤渔， 不得重復(fù)肮街。 只能使用一次。
id選擇器和類選擇器最大的不同在于 使用次數(shù)上判导。
總結(jié)他們
- 類選擇器我們?cè)谛薷臉邮街屑蹈福玫淖疃唷?/li>
- id選擇器一般用于頁(yè)面唯一性的元素身上，經(jīng)常和我們后面學(xué)習(xí)的javascript 搭配使用眼刃。
2.6 通配符選擇器
-
概念
通配符選擇器用
*號(hào)表示绕辖， * 就是 選擇所有的標(biāo)簽 他是所有選擇器中作用范圍最廣的，能匹配頁(yè)面中所有的元素鸟整。 其基本語(yǔ)法格式如下：
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
例如下面的代碼引镊，使用通配符選擇器定義CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距篮条。
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內(nèi)邊距*/
}
-
注意：
會(huì)匹配頁(yè)面所有的元素弟头，降低頁(yè)面響應(yīng)速度，不建議隨便使用
2.7 基礎(chǔ)選擇器總結(jié)
| 選擇器 | 作用 | 缺點(diǎn) | 使用情況 | 用法 |
|---|---|---|---|---|
| 標(biāo)簽選擇器 | 可以選出所有相同的標(biāo)簽涉茧，比如p | 不能差異化選擇 | 較多 | p { color：red;} |
| 類選擇器 | 可以選出1個(gè)或者多個(gè)標(biāo)簽 | 可以根據(jù)需求選擇 | 非常多 | .nav { color: red; } |
| id選擇器 | 一次只能選擇器1個(gè)標(biāo)簽 | 只能使用一次 | 不推薦使用 | #nav {color: red;} |
| 通配符選擇器 | 選擇所有的標(biāo)簽 | 選擇的太多赴恨，有部分不需要 | 不推薦使用 | * {color: red;} |
基礎(chǔ)選擇器我們一共學(xué)了4個(gè)， 每個(gè)都有自己的價(jià)值伴栓， 可能再某個(gè)地方都能用到伦连。但是如果說，一定要找個(gè)最常用的钳垮，那么惑淳，肯定是類選擇器。
2.8 團(tuán)隊(duì)約定
選擇器
- 盡量少用通用選擇器
* - 盡量少用 ID 選擇器
- 不使用無具體語(yǔ)義定義的標(biāo)簽選擇器 div span
/* 推薦 */
.jdc {}
li {}
p{}
/* 不推薦 */
*{}
#jdc {}
div{} 因?yàn)閐iv 沒有語(yǔ)義饺窿，我們盡量少用
