常见CSS选择器的权重和优先级】的更多相关文章

一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a.所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 b.不管这个标签藏的多深,都能够被选择上 c.选择的是所有的,而不是某一个.所以是共性,而不是特性 3.ID选择器:#content(匹配ID属性值等于content的元素) 4.类选择器:.list(匹配class属性包含li…
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源.这个过程就称为层叠.——<css权威指南> 如下图,css规则由选择器和声明块组成,写在选择器后面大括号里的就叫声明.…
首先声明一下CSS三大特性—— 继承. 优先级和层叠.继承即子类元素继承父类的样式;优先级是指不同类别样式的权重比较;层叠是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看一下css选择符(css选择器)有哪些? 1.标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class="head",class="head_logo") 3.ID选择器(如:id="name",id="name_t…
我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先. 那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法: 我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器…
选择器类型 1.ID #id 2.class .class 3.标签 p 4.通用 * 5.属性 [type="text"] 6.伪类 :hover 7.伪元素 ::first-line 8.子选择器.相邻选择器 三.权重计算规则 1. 第一等:代表内联样式,如: style="",权值为1000. 2. 第二等:代表ID选择器,如:#content,权值为0100. 3. 第三等:代表类,伪类和属性选择器,如.content,权值为0010. 4. 第四等:代表类…
权重顺序 “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”.   原文:http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php 我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根…
#转载请留言联系 1.标签选择器 标签选择器,此种选择器影响范围大,一般用来做一些通用设置,或用在层级选择器中.举例: div{color:red} ...... <div>这是第一个div</div> <!-- 对应以上样式 --> <div>这是第二个div</div> <!-- 对应以上样式 --> 2.类选择器 通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选…
选择器的优先级主要用于样式发生冲突的情况下 选择器范围越小,优先级越高 行内样式>id选择器>类选择器>标签选择器>通用选择器 这里涉及一个权重值的问题,权重值越高,优先级越大 权重值 HTML分别为每种类型选择器分配了一个权值: (1)通用选择器 权重值:0 (2)标签选择器 权重值:1 (3)类选择器 权重值:10 (4)ID选择器 权重值:100 (5)行内样式 权重值:1000 权重值的计算: 权值的计算很简单,直接看代码: <!DOCTYPE html> &l…
权重会叠加!…
我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值. 4个等级的定义如下: 第一等:代表内联样式,如: style=””,权值为1000. 第二等:代表ID选择器,如:#content,权值为100. 第三等:代表类,伪类和属性选择器,如.content,权值为10. 第四等:代表类型选择器和伪元素选择器,如div p,权值为1. 例如上图为例,其中#NAV为二等选择器,.ACTIVE为三等选择器,U…