css样式被覆盖解决方案

刚才写样式的时候，通过动态添加class的方式修改一个div的样式，总是不起作用。

查找一些教材中（w3schools等），只说css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”，但对于样式文件中的多个相同样式的优先级怎样排列，没有详细说明。经过测试和继续搜索，得知优先级如下排列：

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

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

所以上例中，#navigator的样式优先级大于.current_block的优先级，即使.current_block是最新添加的，也不起作用。

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

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

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

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

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

对于一开始遇到的问题，有两种解决方案：

1. 将border从#navigator中拿出来，放到一个class .block中，而.block放到.current_block之前：

需要默认为#navigator元素指定class="block"

2. 使用!important:

此时无需作任何其他改动即可生效。可见第二种方案更简单一些。

css样式被覆盖解决方案相关推荐

Vue 项目部署出现css样式失效的解决方案
Vue 项目部署出现css样式失效的解决方案参考文章: (1)Vue 项目部署出现css样式失效的解决方案 (2)https://www.cnblogs.com/Desmondexperience/ ...
自己编写的CSS样式无法覆盖bootstrap样式的问题
本人的错误不是优先级或者定义顺序的问题,加!important也没有效果,现将查找到的方法归纳如下: 定义顺序 html渲染的时候是自上而下的,后面的样式会覆盖前面的样式故先检查一下是否自己编写的c ...
css样式让样式失效,如何让css样式失效
让css样式失效的方法:1.通过更改元素名称,来达到让此区域css失效的目的:2.通过设置优先级高的css样式来覆盖此css样式使其失效. 本教程操作环境:windows7系统.css3版,DELL ...
css样式表中的样式覆盖顺序(转)
有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码 #navigator { height: 100%; width: 200; position: ...
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
[写在前面]vue3在vscode运行正常.build后在IDEA运行正常,但是当部署在服务器上运行发现样式加载不出来,下面我们针对这些情况进行复现与解决. 一.问题分析困扰我好久,当即百度原因,百 ...
SharePoint2010沙盒解决方案基础开发——开发webpart读取绑定列表数据，并以一定的格式显示（加css样式）...
注:此实例无需添加数据控件,避免了一些繁琐的代码实现效果如下: 读取数据和图片,并以每行两列的形式显示所需列表如下: 1. VS2010创建沙盒解决方案 2. 创建webpart 3.在TestW ...
CSS样式:覆盖规则
规则一:由于继承而发生样式冲突时,最近祖先获胜. CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况: <html><head><title> ...
【转】CSS样式覆盖规则
大家都知道CSS的全称叫做"层叠样式表",但估计很多人都不知道"层叠"二字的含义.其实,"层叠"指的就是样式的覆盖,当一个元素被运用上多种样 ...
CSS日常公用样式与一些解决方案
一.自己总结的公用样式解析 html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, b ...

css样式被覆盖解决方案

css样式被覆盖解决方案相关推荐

最新文章

热门文章