2018-05-24 CSS选择器以及优先级计算

内容导读

回答：在开发之中，咱们时常会遇到设置的样式出来的情况，其实咱们以前可能已经为某个元素设定了一个样式，然而该样式的优先级比较高，那么规定好权重，在开发时，就能够依据权重来计算优先级大小，从而防止各种样式覆盖的情况。3.1 优先级分类 第一优先级：无前提优先的属性只需要在属性后面使用!important。 第二优先级：在html中给元素标签加style，即内联样式。 第三优先级：由一个或多个id选择器来定义。第五优先级：由一个或多个类型选择器定义。1.!important > 内联样式>id选择器 > 类选择器 > 标签 > 通配符 > 继承 > 阅读器默许属性 2.但是大多数情况下，咱们常见的选择器都是组合在一块儿的，于是了解具体选择器代表的权值可以利便咱们在开发时进行简单的计算。

一、CSS的三大特性？文章源自微观生活（93wg.com）微观生活-https://93wg.com/4937.html

1.1 继承：子类能够继承父类的某些样式文章源自微观生活（93wg.com）微观生活-https://93wg.com/4937.html

1.2 优先级：不同选择器定义的样式拥有不同的优先级数量文章源自微观生活（93wg.com）微观生活-https://93wg.com/4937.html

1.3 层叠：当优先级数量相同时，后面定义的样式的覆盖前面定义的样式文章源自微观生活（93wg.com）微观生活-https://93wg.com/4937.html

二、CSS有哪些选择器？文章源自微观生活（93wg.com）微观生活-https://93wg.com/4937.html

2.1 元素选择器：div、p、img、a等文章源自微观生活（93wg.com）微观生活-https://93wg.com/4937.html

2.2 id选择器：id2文章源自微观生活（93wg.com）微观生活-https://93wg.com/4937.html

2.3 class选择器：.class1、.class2文章源自微观生活（93wg.com）微观生活-https://93wg.com/4937.html

2.4 全局选择器：*文章源自微观生活（93wg.com）微观生活-https://93wg.com/4937.html

2.5 群组选择器：具有相一样式的元素分组显示，用逗号隔开 div,p,a{color:id1，权值为100文章源自微观生活（93wg.com）微观生活-https://93wg.com/4937.html

第三等级：代表class、伪类以及属性选择器，权值为10

第四等级：代表标签选择器以及伪元素选择器，权值为1

通用选择器、子元素选择器以及相邻同胞选择器其实不在这个等级中，所以权重为0

四、选择器优先级的简单计算

<nav>
<ul id=\"nav\">
<li class=\"checked\"><a href=\"\"></a></li>
<li><a href=\"\"></a></li>
</ul>
</nav>

那么计算下面的元素的优先级

nav ulred;}

图片.png

以上就是微观生活（93wg.com）关于“2018-05-24 CSS选择器以及优先级计算”的详细内容，希望对大家有所帮助！