千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频

▲ css选择器————分为五大类，大类中还有很多小类，总计20多个。

▲ 基本选择器、层次选择器、伪类选择器、属性选择器、伪对象（伪元素）选择器。

一、基本选择器。

1、类型选择器（标签选择器）：

① 以html中的标签作为选择符。

② 什么时候用？————想改变某个元素的默认样式时、

      统一文档某个元素的显示效果时；

③ 语法？————标签{ 属性：属性值；}

2、Class选择器（类选择器）：

① 什么时候用？————想要区分某个或者某些标签时，比如想要区分两个div；

② 语法？————.Class名字{ 属性：属性值；}  eg：.box{ width:300px; }

Class可以给多个属性值，多个属性值之间用空格空开。eg：<div class="box a1 a3"></div>

③ 注意：不能纯数字开头；

不建议使用中文，因为容易造成乱码；

如果需要符号，可以使用 - 或者 _ ，其它符号不可以

建议命名时，采用语义化命名。

3、Id选择器：

① 什么时候用？————想要区分某个或某些标签时，比如想要区分两个div；

② 语法？———— #id名字{ 属性：属性值；}  eg：#box{ width:30px; }

③ 注意：ID有唯一性，属性值只能是一个。

4、通配符：

① 什么时候用？————想让所有的标签同时改变样式的时候。

② 语法？———— *{ 属性：属性值；}  eg：*{ color：red；}

5、群组选择器：

① 什么时候用？————当几个元素样式一样时，可以共同调用一个声明，元素之间用逗号分隔开；

语法？————选择器1，选择器2，选择器3{属性：属性值；}  eg：.box,p,#a2{width:30px;}

① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩

二、层次选择器。

1、后代选择器（包含选择器）：

2、子选择器：

3、相邻兄弟选择器：

4、通用兄弟选择器：

三、伪类选择器。

四、属性选择器。

五、伪对象（伪元素）选择器。