【前端学习】前端学习第四天：CSS常用选择器详细介绍及优先级排名

选择器是css中一个非常重要的概念，它可以用来控制css样式代码控制的对象，从而实现对效果的控制。

一、元素选择器

定义：又称标签选择器，是将HTML中元素的名称作为选择器的名称；

格式：元素名称{属性1：属性值1；...}；

举例：

二、类别选择器

定义：通过给标签定义一个class属性，对元素的样式进行控制；

格式：.类别名称{属性1：属性值1；...}；

举例：

三、ID选择器

定义：通过给标签定义一个id属性，用法和类别选择器类似，不同之处在于各元素的id属性值最好保持不一样；

格式：#id名称{属性1：属性值1...}；

举例：

四、复合选择器 

1、交集选择器

定义：由两个选择器直接连接构成，结果选中二者元素范围中的交集部分，其中第一个必须为标签选择器，第二个必须为类别选择器或id选择器；

格式：元素选择器类别选择器或id选择器{...}；

举例：

2、并集选择器

定义：并集选择器和交集选择器相对应，中间用逗号连接；

格式：元素选择器1，id或类别选择器1...{...} ；

五、通配选择器

通过使用*选中所有的元素；

六、关系选择器 

1、子元素选择器

选中指定父元素的子元素；

格式：父元素>子元素{...}；

2、后代元素选择器

选中指定元素的后代元素，当然，子元素选择器一定是后代选择器，因此子元素选择器也可以使用后代元素选择器的格式来控制样式；

格式：祖先元素选择器 后代元素选择器{...}；

3、兄弟选择器

格式：前一个兄弟+下一个兄弟{...} ：只选择下一个兄弟；

           前一个兄弟~下一个兄弟{...} ：选择下面所有的兄弟；

 

 

4、属性选择器

【属性名】：选择含有指定属性的元素；

【属性名=属性值】：选择含有指定属性和属性值的元素；

【属性名^=属性值】：选择属性值以指定元素开头的元素； 

【属性名$=属性值】：选择属性值以指定元素结尾的元素； 

七、伪类选择器

:first-child   第一个子元素；

:last-child  最后一个子元素；

:nth-child(n)  选中第个子元素；  

:not()  符合条件的元素从选择器中移除；

:hover  鼠标移入；

:active   鼠标点击；

超链接独有的伪类选择器：a:link  表示没访问过的链接；a:visited  表示访问过的链接；

选择器的优先级：

内联选择器>id选择器>类和伪类选择器>元素选择器>通配符选择器

补充：可以在某一个样式后添加 !important ，此时该样式会获取到最高优先级。