选择器的分类

标签选择器

h1 {color:blue;}

类选择器

.important {color:red;}

/* 选择指定标签的类  */
p.className

ID选择器

#intro {font-weight:bold;}

后代选择器（可跨多代）

h1 em {color:red;}

子元素选择器

h1 > strong {color:red;}

相邻兄弟元素选择器

/*选择下一个兄弟元素*/
p + span{}
/*选择下面所有的兄弟元素 指定类名时必须是相邻的元素，不能有间隔！！！*/
p ~ span{}

通配符选择器

* {color:red;}

属性选择器

[属性名]：选择含有指定属性的元素

[属性名="属性值"]：选择含有指定属性和属性值的元素

[属性名^="属性值"]：选择以指定属性值开头的元素

[属性名$="属性值"]：选择以指定属性值结尾的元素

[属性名*="属性值"]：选择属性值中含有某值的元素

伪类选择器

就是不存在的类，伪类用来描述一个元素的特殊状态，比如第一个子元素，比如被点击的元素，鼠标移入的元素。

伪类一般情况下都是以 :开头

:first-child：第一个子元素如果是指定的元素则生效。

:last-child：最后一个子元素如果是指定的元素则生效。

:nth-child(数字)：选中第n一个子元素，传n进去是全部选中，传2n或even进去是选中偶数位的元素，3n是3的倍数的元素，2n+1或odd是奇数为的元素，以此类推。

以上这些伪类，都是根据所有的子元素进行排序的。

:first-of-type

:last-of-type

:nth-of-type()

这几个伪类的功能与上面的相似，不同的是，这些是以同类型的元素进行排序的。

:not()：除了

:only-of-type：指定任意一个元素，这个元素没有与其相同的元素。

:empty：选择没有任何子元素的相同元素

ul > li:not(:nth-of-type(3)){
    color: aqua;
}
/* 除了第三个里，其他的都设置字体颜色 */

a 标签相关的一些伪类

:link：用来表示没访问过的链接

:visited：用来表示访问过的链接，由于隐私的原因，这个伪类只能修改颜色。

:hover：表示鼠标移入后的状态

:active：表示鼠标点击后的状态