千鋒前端浠浠呀老師HTML+CSS教程,零基礎web前端開發(fā)入門必看視頻

▲ css選擇器————分為五大類,大類中還有很多小類,總計20多個。
▲ 基本選擇器、層次選擇器、偽類選擇器、屬性選擇器、偽對象(偽元素)選擇器。
一、基本選擇器。
1、類型選擇器(標簽選擇器):
① 以html中的標簽作為選擇符。
② 什么時候用?————想改變某個元素的默認樣式時、
?? ???統(tǒng)一文檔某個元素的顯示效果時;
③ 語法?————標簽{ 屬性:屬性值;}
2、Class選擇器(類選擇器):
① 什么時候用?————想要區(qū)分某個或者某些標簽時,比如想要區(qū)分兩個div;
② 語法?————.Class名字{ 屬性:屬性值;}??eg:.box{ width:300px; }
Class可以給多個屬性值,多個屬性值之間用空格空開。eg:<div class="box a1 a3"></div>
③ 注意:不能純數(shù)字開頭;
不建議使用中文,因為容易造成亂碼;
如果需要符號,可以使用 - 或者 _ ,其它符號不可以
建議命名時,采用語義化命名。
3、Id選擇器:
① 什么時候用?————想要區(qū)分某個或某些標簽時,比如想要區(qū)分兩個div;
② 語法?———— #id名字{ 屬性:屬性值;}??eg:#box{ width:30px; }
③ 注意:ID有唯一性,屬性值只能是一個。
4、通配符:
① 什么時候用?————想讓所有的標簽同時改變樣式的時候。
② 語法?———— *{ 屬性:屬性值;}??eg:*{ color:red;}
5、群組選擇器:
① 什么時候用?————當幾個元素樣式一樣時,可以共同調(diào)用一個聲明,元素之間用逗號分隔開;
語法?————選擇器1,選擇器2,選擇器3{屬性:屬性值;}??eg:.box,p,#a2{width:30px;}
① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩
二、層次選擇器。
1、后代選擇器(包含選擇器):
2、子選擇器:
3、相鄰兄弟選擇器:
4、通用兄弟選擇器:
三、偽類選擇器。
四、屬性選擇器。
五、偽對象(偽元素)選擇器。