技術交流QQ群:1027579432斩芭，歡迎你的加入！
歡迎關注我的微信公眾號：CurryCoder的程序人生
1.CSS選擇器的作用
<div>我是div</div>
<div>我是div</div>
<p>我是段落</p>
<ul>
<li>我是ul里面的小li哦</li>
</ul>
<ol>
<li>我是ol里面的小li哦</li>
</ol>
-
需求：
- 怎么把div里面的文字改成紅色派哲？
- 怎么把第一個div里面的文字改成紅色？
- 怎么把ul里面的li文字改成紅色？
- 選擇器(選擇符)就是根據(jù)不同需求把不同的標簽選出來這就是選擇器的作用相味。簡單來說，就是選擇標簽用的殉挽。
- CSS做了兩件事：
- 找到所有的h1標簽丰涉，選擇器(選對人)。
- 設置這些標簽的樣式斯碌，比如顏色為紅色(做對事)一死。
2.選擇器的分類
- 選擇器分為基礎選擇器和復合選擇器兩大類，先介紹基礎選擇器傻唾。
- 基礎選擇器是由單個選擇器組成的投慈。
- 基礎選擇器又包括：標簽選擇器、類選擇器冠骄、id選擇器伪煤、通配符選擇器。
3.標簽選擇器
- 標簽選擇器(元素選擇器)是指用HTML標簽名稱作為選擇器凛辣，按標簽名稱分類抱既，為頁面中某一類標簽指定統(tǒng)一的CSS樣式。
- 語法規(guī)范：
標簽名 { 屬性1： 屬性值1; 屬性2： 屬性值2; 屬性3： 屬性值3; ... } - 作用：標簽選擇器可以把某一類標簽全部選擇出來蟀给，比如所有的<div>標簽和所有的<span>標簽蝙砌。
- 優(yōu)點：能夠快速為頁面中同類型的標簽統(tǒng)一設置樣式。
- 缺點：不能設計差異化樣式跋理，只能選擇全部的當前標簽择克。
4.類選擇器[重點]
4.1 類選擇器基礎
- 如果想要差異化選擇不同的標簽，單獨選一個或者某幾個標簽前普，可以使用類選擇器肚邢。
- 類選擇器在HTML中以class屬性表示，在CSS中，類選擇器以一個點.號顯示骡湖。
- 語法格式：
.類名 { 屬性1：屬性值1; ... } - 例如贱纠，將所有擁有red類的HTML元素均改為紅色。
.red { color: red; } - 結(jié)構需要用class屬性來調(diào)用class類的意思
<div class='red'> 變紅色 </div> - 注意：
- 類選擇器使用"."進行標識响蕴，后面緊跟類名(自己定義的類名谆焊，不能定義與已有標簽名相同) ；
- 可以理解為給這個標簽起了一個名字來表示浦夷；
- 長名稱或詞組可以使用中橫線來為選擇器命名辖试；
- 不要使用純數(shù)字涕蜂、中文等來命名姚淆，盡量使用英語字母來表示；
- 命名要有意義狞尔，盡量使用別人一眼就知道這個類名的目的肥缔；
- 命名規(guī)范：見附件(Web前端開發(fā)規(guī)范手冊.doc)
- 記憶口訣：樣式點定義莲兢、結(jié)構類調(diào)用、一個或多個续膳、開發(fā)最常用改艇。
4.2 類選擇器-多類名
- 可以給一個標簽指定多個類名，從而達到更多的選擇目的坟岔。這些類名都可以選出這個標簽遣耍，簡單理解就是一個標簽有多個名字。
4.2.1 多類名使用方式
- 在標簽class屬性中寫多個類名炮车；
- 多個類名中間必須使用空格分開舵变；
- 這個標簽就可以分別具有這些類名的樣式；
- 從而節(jié)省CSS代碼瘦穆，統(tǒng)一修改也非常方便纪隙；
- 多類選擇器在后面布局比較復雜的情況下，還是較多使用的扛或。
<div class="red font20">亞索</div>
4.2.2 多類名開發(fā)中的使用場景
- 可以把一些標簽元素相同的樣式(共同的部分)放到一個類里面绵咱；
- 這些標簽都可以調(diào)用這個公共的類，然后再調(diào)用自己獨有的類熙兔；
5.id選擇器
- id選擇器可以為標有特定id的HTML元素指定特定的格式悲伶。HTML元素以id屬性來設置id選擇器，CSS中id選擇器以#來定義住涉。
- 語法格式：
#id名 { 屬性1：屬性值1; ... } - 例如麸锉，將id為nav元素中的內(nèi)容設置為紅色。
#nav { color: red; } - 調(diào)用過程：
<div id="nav">我是curry</div> - 注意：id屬性只能在每個HTML文檔中出現(xiàn)一次舆声，口訣：樣式#定義花沉、結(jié)構id調(diào)用柳爽、只能調(diào)用一次、別人勿使用*
-
id選擇器與類選擇器的區(qū)別：
- 類選擇器class好比是人的名字碱屁，一個人可以有多個名字磷脯，同時一個名字也可以被多個人使用。
- id選擇器好比是人的身份證號娩脾，全中國唯一的赵誓，不能重復！
- id選擇器和類選擇器的最大不同在于使用次數(shù)上柿赊。
-
類選擇器在修改樣式中使用的最多架曹，id選擇器一般用于頁面唯一性的元素上，經(jīng)常和JavaScript搭配使用闹瞧。
id選擇器與類選擇器的形象對比.png
6.通配符選擇器
- 在CSS中，通配符選擇器使用*定義展辞，它表示選取頁面中所有元素(標簽)奥邮。
- 語法規(guī)范：
* { 屬性1：屬性值1; ... } - 通配符選擇器不需要調(diào)用，自動就會給所有的元素使用樣式
- 特殊情況下才使用罗珍，后面講解使用場景(以下是清除所有的元素標簽的內(nèi)外邊距)
* { margin: 0; padding: 0; }
7.基礎選擇器總結(jié)
基礎選擇器總結(jié).png
- 每個基礎選擇器都有使用場景洽腺，都需要掌握；
- 如果是修改樣式覆旱，類選擇器是使用最多的蘸朋；
