CSS选择器

在 CSS 中，选择器是选取需设置样式的元素的模式。

下面我们介绍几种常用选择器:

1.元素选择器:通过选择html标签设置css样式

如果设置 html的样式，选择器通常将是某个 html元素，比如 p、h1、em、a，甚至可以是 html 本身：

写法：html{font-size:35px;}

2.类选择器：通过获取class类设置css样式

写法：.name{color:red;}

“.”表示类，“name”表示类名，以.开头加类名表示类选择器

3.ID选择器：通过获取ID来设置css样式

   写法：#name{color:red;}

“#”表示id，“name”表示id名，以#开头加id名表示ID选择器

注意：ID命名和class命名不能以数字开头

4.*：通配符，匹配到所有的元素

   例：*{display:none;}   所有元素不会被显示（适合刚入门的同学在其他人的代码上打出来）

5.后代选择器：选择某元素所有后代匹配到指定的元素，有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限

例：选择 div标签里面的所有后代元素为a标签

写法：div a{color:red;}  标签名与标签名之间以空格隔开

6.直接后代选择器：选择某元素匹配到的子元素

例：选择 div标签里面的所有子元素为p标签

写法：div>p{color:red;}

7.相邻兄弟选择器:选择紧接在某元素后的兄弟元素，且二者有相同父元素

例：选择紧跟p标签的首个a标签

写法;p+a{color:red;}

 

8.兄弟选择器:选择紧跟某标签后的所有指定的兄弟标签

  例：选择紧跟p标签的所有a标签

写法：p~a{color:red;}

 

9.结构选择器

常用结构选择器：div p:nth-child(2){color:red;}

选择其父元素（div）的第二个子元素p标签

常用结构选择器：div p:nth-of-type(4){color:red;}

选择其父元素（div）中p元素的第四个元素

其它的还有：