css优先级和层叠

css优先级和层叠

1、优先级
    计算方法:
        a、行内样式
        b、id选择器的数量
        c、类,伪类和属性选择器的数量
        d、标签选择器和伪元素选择器的数量
    假设a,b,c,d的权重分别为1000,100,10,1
    那么有:

2、css层叠

  了解了css的优先级,这时候我们就不得不提css中的层叠(此时考虑的还不涉及到z-index),我们应该知道如下几点:

         1、当优先级相同,属性名相同时,后面的样式会覆盖前面的样式
            2、当优先级相同,属性名有不同时,不同的属性会合并,相同的属性依然按照前面的规则
            3、当优先级不同,属性名相同时,优先级高的会覆盖优先级低的
            4、当优先级不同,属性名有不同时,不同的属性会合并,相同的属性依然按照前面的规则
  下面我们通过这个例子来解释:

<div><p class="demo">css层叠</p></div>
			p{
				color: blue;
				text-align: left;
				font-weight: bold;
			}
			p.demo{
				color: red;
				text-align: right;
			}
			p:first-child{
				color: yellow;
			}

  我们先来探究color属性,color最终的颜色是黄色,原因:首先p标签选择器的权重明显小于后面的两种选择其器,其次p.demo和p:first-child分别是类选择器和伪类选择器,它们的权重是一样的,考虑css层叠,后面的样式会覆盖前面的样式;同理我们也很容易看出,最终的text-align的值为right;至于font-weight的值,究竟有还是没有呢?再看我没呢前面列出来的css层叠第四点,不同的属性会合并,那么font-weight最终的值就是bold。

  那么我们在具体实践中究竟该如何改变我们的样式呢?

  方法一:改变先后顺序

  方法二:提升选择器的优先级

  方法三:通过!important来提升权重(前面的方法都不可用时再考虑用这种方法)

    案例如下:

  如图:demo中的示例文字的颜色为红色,我们想修改它的颜色为黑色办?

    方法一:改变先后顺序

       .special{ color: red; }
              .tip{ color: black; }

    方法二:提升选择器的优先级

    p.tip{ color: black; }
              .special{ color: red; }

    方法三:加上!important

   .tip{ color: black !important; }
              p.special{ color: red; }

  扩展,我们将div中的p标签里面加上id="special",将样式里面修改为:

    .tip{ color: black !important; }
              p#special{ color: red; }

  结果仍显示黑色,这是为什么呢?前面的文章中有介绍过!important是最高权重,对的,就是如此。

注意:不要混淆了!important和@import,@import详情见@import和link的区别

时间: 2025-01-15 01:00:13

css优先级和层叠的相关文章

CSS三大特性(继承、优先级、层叠)之个人见解

首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开头的样式以及我们常用的color.简单的就不演示了,强调一下font-size这个东东(虽然也有继承,但是标签不同继承的效果也不一样),比如下面的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c

[转载]CSS三大特性(继承、优先级、层叠)之个人见解

首先声明一下CSS三大特性——继承.优 先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text- indent等t开头的样式以及我们常用的color.简单的就不演示了,强调一下font-size这个东东(虽然也有继承,但是标签不同继承的效果也 不一样),比如下面的代码: <!DOCTYPE html> <html lang="en"> <head> <met

CSS:权重和层叠规则决定了其优先级

来源:http://www.ido321.com/1063.html 首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 >  通配符 > 继承 二.CSS权重规则        在<页面重构中的模块化

CSS结构和层叠

每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素.有了这个结构树,选择器才能起作用,这也是CSS继承的核心.继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源,这个过程称为层叠. 1.特殊性 每个选择器都有特殊性,对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明.若一个元素有两个或多个冲突的属性声明,那么有最高特殊性

css优先级计算规则

原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没有然后了……,ID选择器的优先级确实>class选择器的优先级>元素选择器的优先级,但是外联样式优先级并不一定低于内联样式优先级.做为一个合格的前端工程师,让我们彻底搞清楚css优先级计算规则吧! 特殊性 css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏

26.前端css优先级以及继承

1.css优先级以及继承 css具有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 有一些属性是可以继承下来 : color . font-*. text-*.line-* .主要是文本级的标签元素. 但是像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承. 层叠性 层叠性: 权重的标签覆盖掉了权重小的标签,说白了 ,就是被干掉了权重: 谁的权重大,浏览器就会显示谁的属性 权重大小比较方法: 样式表中的特殊性描述了

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时

浅谈CSS优先级机制(一)

初次写随笔,如果有哪个地方不足还望大神指点改正,下面我来谈谈我对于CSS优先级的了解吧. CSS优先级,通俗的理解就是你给元素等一堆属性描述,然后最后到底是哪个描述作为最终显示的效果的规则或机制(个人理解).以下我将分为几个点来谈谈优先级的确定. 1.引入方式: CSS引入的方式,我目前只知道四种:内联式.内嵌式.导入式.链接式(当然网上的说法名称不一,理解就好). 各种引入方式的用法我在这里就不再多说了.以上我所按顺序罗列的四个方式是理论上的优先级顺序,也就是说,我使用内联式引入的css代码作

css 优先级 机制

多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式. 选择器的优先权--->权值 内联样式---1000: ID选择器----100:class选择器---10: 标签