详解css样式处理的优先级

想要对一个标签处理它的样式，可以用 class=“” 的方式来定义它的类，然后在类中处理他的样式

例如：

<style>.box{width:100px;height:100px;background:#0f0}
</style><div class="box" ></div>

当然也可以用 id ，或者干脆直接对标签写样式，然而如果把这些定义都放在了一个元素中的时候，就蒙圈了，计算机到底先处理谁呢？需要更改的时候，改哪个呢？

比如这样的问题:

<style>
div{}
.aa{}
#bb{}
</style>
<div class="aa" id="bb"  style="xxx:xxx"></div>

里面既定义了标签 div 又定义了类aa 还定义了 bb,而且又在里面定义了行内样式 style="xxx:xxx" 那么如果我要更改的话，到底改谁呢。这就涉及到一个css 样式优先级的问题了。

经过总结：得到如下经验：

优先级：

规则一：标签< class < id < 行内样式 <!import

规则二：同级元素以顺序排序作为判断依据:下面的覆盖上面的

例子一:

class 和 id比较

<style>
.hh{clear:both}
#bo{background:#0f0;width:100px; height:100px} /*绿色*/
.box{width:50px;height:50px;background:#00f;float:left}
</style> <div class="box"></div>
<div class="box" id="bo"></div>

总结：

一、优先级高的如果定义的属性和优先级低的定义的属性相冲突，那么会覆盖优先级低的

二、优先级低的定义的属性，优先级高的没有再次定义，那么会继承优先级低的

同级元素以顺序排序作为判断依据:下面的覆盖上面的

例：

<style>
.box1{width:100px;height:100px;}
.box1{background:#0f0}      /*绿色*/
.box1{background:#f00}      /*红色*/
</style><div class="box1"></div>

总结：

一：优先级相同级别的情况下，系统按照最后一次定义的属性为标准。下面覆盖上面的

原因:浏览器解释html 语言的方式是从上往下，从左往右的解释，通过解释完所有样式得出最终结果才会显示出来。

详解css样式处理的优先级相关推荐

float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
html nthchild作用,详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nt ...
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
详解CSS float属性
转自:http://luopq.com/2015/11/08/CSS-float/ \详解CSS float属性 Posted on 2015-11-08 | In CSS | 5条评 ...
详解CSS伪元素::marker
::marker介绍 ::marker CSS pseudo-element(CSS伪元素) 选中一个list item的marker box,后者通常含有一个项目符号或者数字.它作用在任何设置了di ...
CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
inline-block是html5,详解CSS display:inline-block的应用
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...
详解CSS display:inline-block的应用（转）
详解CSS display:inline-block的应用阅读目录基础知识 inline-block的问题 inline-block的应用总结本文详细描述了display:inline-blo ...
html css 距离顶部距离,详解CSS line-height和height
最近在做CSS界面时经常遇到line-height和height这两个属性,一直没搞很明白,今天静下心来好好网上查阅了一下,算是有所领悟.https://blog.csdn.net/a20131263 ...

详解css样式处理的优先级

class 和 id比较

总结：

同级元素以顺序排序作为判断依据:下面的覆盖上面的

总结：

详解css样式处理的优先级相关推荐

最新文章

热门文章