第01階段.前端基礎(chǔ).CSS基礎(chǔ)選擇器
CSS選擇器（重點(diǎn)）
學(xué)習(xí)目標(biāo)：
- 理解
- 能說出選擇器的作用
- id選擇器和類選擇器的區(qū)別
- 應(yīng)用
1. CSS選擇器作用（重點(diǎn)）
如上圖所以，要把里面的小黃人分為2組，最快的方法怎辦？
很多， 比如 一只眼睛的一組，剩下的一組
選擇器的作用
? 找到特定的HTML頁面元素
一句話說出他們： ※※※※
**CSS選擇器干啥的？ 選擇標(biāo)簽用的， 把我們想要的標(biāo)簽選擇出來 ** 必須記住的
css 就是 分兩件事， 選對人， 做對事。
h3 {
color: red;
}
這段代碼就是2件事， 把 h3選出來， 然后 把它變成了 紅色。 以后我們都這么干。
選擇器分為基礎(chǔ)選擇器和 復(fù)合選擇器，我們這里先講解一下 基礎(chǔ)選擇器。
2. CSS基礎(chǔ)選擇器
2.1 標(biāo)簽選擇器
標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
總結(jié) 口訣：
標(biāo)簽選擇器，
頁面同選起。
直接寫標(biāo)簽，
全部不放棄。
思考： 如果想要差異化選擇不同的標(biāo)簽，怎么辦呢？ 就是說 我想單獨(dú)選一個或者某幾個標(biāo)簽?zāi)兀?
2.2 類選擇器
類選擇器使用“.”（英文點(diǎn)號）進(jìn)行標(biāo)識，后面緊跟類名.
命名規(guī)范： 見附件（Web前端開發(fā)規(guī)范手冊.doc）
命名是我們通俗約定的，但是沒有規(guī)定必須用這些常用的命名。
課堂案例：
<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)簽指定多個類名，從而達(dá)到更多的選擇目的。
注意：
- 各個類名中間用空格隔開。
- 多類名選擇器在后期布局比較復(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)識，后面緊跟id名
id選擇器和類選擇器區(qū)別
- W3C標(biāo)準(zhǔn)規(guī)定，在同一個頁面內(nèi)，不允許有相同名字的id對象出現(xiàn)，但是允許相同名字的class。
- 類選擇器（class） 好比人的名字， 是可以多次重復(fù)使用的， 比如 張偉 王偉 李偉 李娜
- id選擇器 好比人的身份證號碼， 全中國是唯一的， 不得重復(fù)。 只能使用一次。
id選擇器和類選擇器最大的不同在于 使用次數(shù)上。
pink老師 總結(jié)他們
- 類選擇器我們在修改樣式中，用的最多。
- id選擇器一般用于頁面唯一性的元素身上，經(jīng)常和我們后面學(xué)習(xí)的javascript 搭配使用。
2.6 通配符選擇器
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距。
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內(nèi)邊距*/
}
2.7 基礎(chǔ)選擇器總結(jié)
| 選擇器 | 作用 | 缺點(diǎn) | 使用情況 | 用法 |
|---|
| 標(biāo)簽選擇器 | 可以選出所有相同的標(biāo)簽，比如p | 不能差異化選擇 | 較多 | p { color：red;} | | 類選擇器 | 可以選出1個或者多個標(biāo)簽 | 可以根據(jù)需求選擇 | 非常多 | .nav { color: red; } | | id選擇器 | 一次只能選擇器1個標(biāo)簽 | 只能使用一次 | 不推薦使用 | #nav {color: red;} | | 通配符選擇器 | 選擇所有的標(biāo)簽 | 選擇的太多，有部分不需要 | 不推薦使用 | * {color: red;} |
基礎(chǔ)選擇器我們一共學(xué)了4個， 每個都有自己的價值， 可能再某個地方都能用到。但是如果說，一定要找個最常用的，那么，肯定是類選擇器。
2.8 團(tuán)隊(duì)約定
選擇器
- 盡量少用通用選擇器
* - 盡量少用 ID 選擇器
- 不使用無具體語義定義的標(biāo)簽選擇器 div span
/* 推薦 */
.jdc {}
li {}
p{}
/* 不推薦 */
*{}
#jdc {}
div{} 因?yàn)閐iv 沒有語義，我們盡量少用
來源：https://www./content-4-832851.html
|
