css选择器优先级如何计算,2018-05-24 CSS选择器和优先级计算-优快云博客

内容导读

回答：在开发当中，我们经常会遇到设置的样式出来的情况，其实我们之前可能已经为某个元素设定了一个样式，但是该样式的优先级比较高，那么规定好权重，在开发时，就可以根据权重来计算优先级大小，从而避免各种样式覆盖的情况。3.1 优先级分类第一优先级：无条件优先的属性只需要在属性后面使用!important。(它会覆盖页面内任何位置定义的元素样式) 第二优先级：在html中给元素标签加style，即内联样式。(该方法会造成css难以管理，所以不推荐使用) 第三优先级：由一个或多个id选择器来定义。第五优先级：由一个或多个类型选择器定义。1.!important > 内联样式>id选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 2.然而大多数情况下，我们常见的选择器都是组合在一起的，于是了解具体选择器代表的权值可以方便我们在开发时进行简单的计算。一、CSS的三大特性？

1.1 继承：子类能够继承父类的某些样式

1.2 优先级：不同选择器定义的样式具有不同的优先级数量

1.3 层叠：当优先级数量相同时，后面定义的样式的覆盖前面定义的样式

二、CSS有哪些选择器？

2.1 元素选择器：div、p、img、a等

2.2 id选择器：#id1、#id2

2.3 class选择器：.class1、.class2

2.4 全局选择器：*

2.5 群组选择器：拥有相同样式的元素分组显示，用逗号隔开 div,p,a{color:#000;}

2.6 属性选择器：

a[attribute=value]:属性值为value的属性a[attribute~=value]:属性值包含value的属性a[attribute|=value]:属性值以value开头的属性a[attribute*=value]:属性值包含value的属性a[attribute^=value]:属性值以value开头的属性a[attribute$=value]:属性值以value结尾的属性2.7 后代选择器：子元素和父元素之前用空格分开 div p

2.8 子元素选择器：子元素和父元素用大于号隔开 div > p

后代选择器选择所有符合添加的子元素，包括子元素的子元素；然而子元素选择器只选择符合条件的直接后代。

2.9 相邻同胞选择器：兄弟元素之间用加号隔开h1+p

2.10 伪类选择器：a:link、a:visited、a:active、a:hover、input:focus

2.11 伪元素选择器：

div:after：在div元素之后插入内容

div:before：在div元素之前插入内容

p:first-letter：为p元素的文本首字母添加样式

p:first-line：为p元素的文本首行添加样式

三、选择器权重

提问：为什么不同的选择器为什么会有权重？

回答：在开发当中，我们经常会遇到设置的样式出来的情况，其实我们之前可能已经为某个元素设定了一个样式，但是该样式的优先级比较高，那么规定好权重，在开发时，就可以根据权重来计算优先级大小，从而避免各种样式覆盖的情况。