css选择器的优先级是怎么样设定的?

2017-10-09 本文已影响28人 LHongLi

大家好，我是IT修真院上海分院第1期的Web学员刘洪利，今天给大家分享一下，修真院官网前端工程师（职业）css任务3中的-----css选择器的优先级是怎么样设定的?

什么是CSS选择器？

在HTML页面中,如果我们想要去改变一个元素的字体大小、尺寸、颜色、样式等 ,就需要用到Css选择器来进行对修改元素一对一或者多对一的进行匹配并改变其样式,这就是css选择器

选择器的类型

选择器的类型有元素选择器、类选择器、ID选择器、后代选择器、伪类选择器、通用选择器、相邻同胞选择器以及属性选择器

下面会挨个为大家简单介绍一下

1.元素选择器：

元素选择器通常会是选择某个HTML元素，如p、a甚至可以是html本身。

而且元素选择器会匹配到HTML页面中被选择器选中元素的页面中的全部元素。

2.类选择器：

通过给样式前面加一个点号"."来进行表示。

类选择器可以应用样式而不用考虑其他被涉及的原色.

3.ID选择器:

ID选择器通常是由一个#字符表示

4.后代选择器:

后代选择器是通过元素之间的父子关系来进行选择.比如说在一个div中有一个子级p元素,除了使用元素选择器

或者类选择器以外还可以通过下图的这种方式进行选择.这样就会可以把div中所有的子级p元素统统字体加粗.

5.伪类选择器:

有时候我们会需要根据文档结构之外的其他条件对元素应用样式，譬如表单元素或者链接的状态这就需要使用伪类选择器来完成

6.通用选择器:

通用选择器可能是所有选择器中最强大却最少使用的，通用选择器的作用就像是通配符，它可以匹配所有可用的元素。起作用主要在实际中的使用是删除每个元素上默认的浏览器内外边距。通过*号来表示

7.相邻同胞选择器[h2 + p]:

相邻同胞选择器可用于定位同一个父元素下某个元素之后相邻的元素

8.属性选择器[class]:

它可以根据元素的属性和属性值来选择元素 , 比如要选择HTML页面中有class属性(值不限)的div元素,使其margin-left:10px.

常见问题:

对多个选择器使用的优先级是怎么进行计算的？如何合理的使用类型选择器？

解决方案:

根据按照官方的表述，css优先级如下：

通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式

但是当如果同时有几个选择器规则应用在同一个元素上，我想最终要的那条优先级又比其他的比较低,这时,我们就可以使用重要声明!important来强制应用这条样式

扩展思考:

子选择器和后代选择器的区别？

个人理解的话,子选择器其实就是后代选择器中的一种,只不过,只不过,子选择器（child selector）仅是指它的直接后代，或者可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

参考文献:

《Css权威指南》

css权重及!important------林中路博客