html和css执行顺序,CSS样式的优先级执行顺序和覆盖规则

好看的网站离不开css样式的布局和装饰，那么大量的css样式，它们的优先级执行顺序和覆盖规则是什么呢？

CSS主要有三种引用方式：元素上的style、文件头上的style元素、外部样式文件。这三种优先级排列顺序为：元素上的style>文件头上的style元素>外部样式文件。

其中CSS样式还遵循如下优先级覆盖排列顺序：

示例样式：

#navid {

height: 100%;

width: 200;

position: absolute;

left: 0;

border: solid 2 #EEE;

}

.navclass {

border: solid 2 #AE0;

}

1. 样式表的元素选择器选择越精确，则其中的样式优先级越高：

id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式

所以上例中，#navid的样式优先级大于.navclass的优先级，及时.navclass是最新添加的，也不起作用。

2. 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高

注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后：

.class1 {

color: black;

}

.class2 {

color: red;

}

而某个元素指定class时采用 class="class2 class1"这种方式指定，此时虽然class1在元素中指定时排在class2的后面，但因为在样式表文件中class1处于class2前面，此时仍然是class2的优先级更高，color的属性为red，而非black。

3. 如果要让某个样式的优先级变高，可以使用!important来指定：

.class1 {

color: black !important;

}

.class2 {

color: red;

}

此时class将使用black，而非red。

使用!important:强制优先级

使用!important:可以强制执行优先级顺序，示例：

.current_block {

border: solid 2 #AE0 !important;

}

以上就是CSS样式的优先级执行顺序，以及在什么情况下会覆盖前面的css样式。

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/1095.html

html和css执行顺序,CSS样式的优先级执行顺序和覆盖规则相关推荐

css的四种样式及其优先级
目录 1.行内样式代码 2.内嵌样式代码 3.外链样式代码 4.导入样式 5.四种样式的优先级 1.行内样式行内样式又叫标签样式,它是在标签里面加上style属性代码 <body> ...
html和css哪个优先,CSS3 | 样式和优先级
css3一般介绍: CSS注释:/*CSS*/ CSS长度单位: 1.px(像素) 2.em(倍数,一般用于文字) 一.HTML嵌套CSS3样式: 1.外部(推荐) 例如HTML文件为index.ht ...
JQuery中.css()与.addClass()设置样式的区别
对于样式的设置,我们学了addClass与css方法,那么两者之间有什么区别? 可维护性: .addClass()的本质是通过定义个class类的样式规则,给元素添加一个或多个类.css方法是通过Ja ...
css样式浏览器的读取顺序
css样式浏览器的读取顺序例: tbody tr td{} 浏览器是先查找td,然后去找td tr,然后去找td tr tbody div p{}和div>p{}的区别 .div p{} 是 ...
css样式的加载顺序及覆盖顺序
在写前端样式时,总是会用到bootstrap框架,虽说bootstrap框架上的样式已经十分齐全,但是在实际使用过程中,总是会想要达到的效果有一定差距,这时候就需要我们自己对bootstrap原有样式 ...
怎么排列html的顺序,css样式优先级及层叠的顺序排序探讨
一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用!important可 ...
css !important用法以及CSS样式使用优先级判断
之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...
HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
用于设定表格样式的附加css,Dreamweaver使用CSS样式表设置网页文本格式
核心提示:本文章介绍如何在 Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式.您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本,从而能更加灵活自如地控 ...

html和css执行顺序,CSS样式的优先级执行顺序和覆盖规则

html和css执行顺序,CSS样式的优先级执行顺序和覆盖规则相关推荐

最新文章

热门文章