刚才写zenktodo的时候,通过动态添加class的方式修改一个div的样式,总是不起作用。
#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0;
}
查找一些教材中(w3schools等),只说css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”,但对于样式文件中的多个相同样式的优先级怎样排列,没有详细说明。经过测试和继续搜索,得知优先级如下排列:
1. 样式表的元素选择器选择越精确,则其中的样式优先级越高:
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
所以上例中,#navigator的样式优先级大于.current_block的优先级,即使.current_block是最新添加的,也不起作用。
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。
对于一开始遇到的问题,有两种解决方案:
1. 将border从#navigator中拿出来,放到一个class .block中,而.block放到.current_block之前:
#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
}
.block {
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0;
}
需要默认为#navigator元素指定class="block"
2. 使用!important:
#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0 !important;
}
此时无需作任何其他改动即可生效。可见第二种方案更简单一些。
分享到:
相关推荐
什么是CSS? 中文翻译为样式表! 它的作用简单的说:就是可以使...各种将样式表加入到HTML文本中的方法。 依赖样式表 怎样会是滥用样式表和使你的网页难以处理。 CSS 参考 连接到介绍CSS的规范和其它方面的文章。
css/层叠样式表 中文手册 按照字母顺序排列
现在开始样式表! 仅仅改变一个文件就可以改变数百个网页的外观......个性化的表现而不损失访问者......所有这些都因为网页样式表的强大和灵活特性。 CSS 速成 层叠样式表的基础入门。 CSS 结构和规则 各种...
结构与样式分离,在页面里只写入文档的结构,而将样式写于css文件中,通过外部调用CSS样式表来实现结构与样式的分离。 5.尽量使用派生选择器,减少ID命名, 如 #main-menu ul li {…} 6.属性书写顺序...
查找一些教材中(w3schools等),只说css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”,但对于样式文件中的多个相同样式的优先级怎样排列,没有详细说明。经过测试和继续搜索,得知...
css样式完全手册目录: 现在开始样式表! 仅仅改变一个文件就可以改变数百个网页的外观......个性化的表现而不损失访问者......所有这些都因为网页样式表的强大和灵活特性。 CSS 速成 层叠样式表的基础入门。 ...
CSS样式层叠顺序 当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。 正如以前所提及的,网页制作者和读者都有...
选择符规则: 计算特性基于它们的特性级别,样式表也可以超越与之冲突的样式表,一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。 当使用了多个样式表,样式表...
css样式优先级是按照样式表中出现顺序还是按照元素中class或者id值的声明顺序呢,这个问题貌似一直存在我们身边却一直无从选择,接下来用实例为大家说明下,到底哪个高点,感兴趣的你可不要错过了哈
css中关于超链接的四个属性正确顺序为: 复制代码代码如下: a:link {} a:visited {} a:hover {} a:active {} 伪类名字对大小写不敏感,但在定义顺序上有要求。:hover必须被置于:link和:visited之后才
CSS 层叠样式表 CSS 索引│CSS 结构│CSS 属性 -------------------------------------------------------------------------------- 现在开始样式表! 仅仅改变一个文件就可以改变数百个网页的外观......个性化...
这就要看css样式表的引入顺序了,如果先引入自己写的,再引入Ext自带的,那么浏览器先读自己写的css样式,然后再读Ext自带的样式。结果我们的自己写的css样式就被覆盖了。 解决办法: 这样就对了。 js文件中的变量...
脑图形式的css选择器和层叠规则整理,包括css选择器的类型以及css层叠规则的影响因素(重要性、来源、特殊性、顺序等等),属于前端基础技术的资源
Visual CSS(以下简称VCS)是一款CSS(Cascading Style Sheets,层叠样式表)代码编辑器,它的最大特点即是可以实时预览CSS代码所呈现的效果。
一般情况下,我们css样式表是放在头部,同时为了减少请求,我们通常对css进行一个合并压缩。 目前我们css一般是如下加载的: <head> <link rel=stylesheet href=/all-of-my-styles.css> </head>...
S-CSS-P SCP Wiki 的样式表选择器。贡献有五种可用类型的样式表可以构建: 布局(页面周围元素的移动、大块级内容的边距和填充。 颜色(颜色、背景颜色、边框样式和颜色、框阴影、菜单图像以及小项目级内容的边距和...
Lint和样式表的顺序为 。 产品特点 对规则和规则内容进行排序。 对属性进行排序。 按不同选项对规则进行排序。 组属性,自定义属性,美元变量,嵌套规则,嵌套规则。 支持CSS,SCSS(使用 ),HTML(带有 ),...