《前端》样式冲突，怎么解决--2020年3月30日

2024-04-03 05:07:29

有时候我引用了bootstrap样式，自己也定义了样式。但是我看后台应用的是bootstrap包装好的样式。

（很多时候，其实是我愚蠢的总把id选择器，用了“.”，其实应该用“#”）

还有的时候，element.style 的样式也阻挡了我自定义的样式。--这是行间样式，优先级更高。

首先，了解优先级问题。

通常可以将css的优先级由高到低分为六组：

1、第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。

2、第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。

3、第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}。

4、第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}。

5、第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}。

6、第六优先级：通配选择器，如*{marigin:6px;}。

如果是处于同一优先级的规则，后定义的规则优先。另外根据权重值决定优先等级。

4个等级的定义如下：（最高优先级：！important）

第一等级：代表内联样式，如style=""，权值为 1000
第二等级：代表id选择器，如#content，权值为100
第三等级：代表类，伪类和属性选择器，如.content，权值为10
第四等级：代表标签选择器和伪元素选择器，如div p，权值为1

计算规则如下图：

element.style 的样式

如何修改element.style内联样式：

我们在写前面 web页面样式的时候，会发现有些时候，我们怎么修改 style里面的值，页面上的样式都不会修改，当你用工具查看时，会发现里面会有 element.style的值，这个值还找不到是在哪里出现的，还修改不了。

其实element.style是一种内联样式，很多情况下是在一些JavaScript代码里写死的，这种方法相当不好。但是有些时候，我们在使用第三方js文件时，会遇到。

哪我们如何去修改它呢，在源代码中用!important 语法优先权来实现我们想要的效果。

《前端》样式冲突，怎么解决--2020年3月30日相关推荐

Paper：2020年3月30日何恺明团队最新算法RegNet—来自Facebook AI研究院《Designing Network Design Spaces》的翻译与解读
Paper:2020年3月30日何恺明团队最新算法RegNet-来自Facebook AI研究院<Designing Network Design Spaces>的翻译与解读导读: 卧槽 ...
Paper之RegNet：《Designing Network Design Spaces》的翻译与解读—2020年3月30日来自Facebook AI研究院何恺明团队最新算法RegNet
Paper之RegNet:<Designing Network Design Spaces>的翻译与解读-2020年3月30日来自Facebook AI研究院何恺明团队最新算法RegNet ...
lol服务器维护9月30,LOL云顶之弈2020年9月30日更新结束时间一览 10.20版本上线
LOL云顶之弈2020年9月30日的更新内容介绍,今天小编给大家带来的就是云顶之弈10.20版本的更新结束时间一览,希望对大家有所帮助. LOL将在9月30日凌晨3点开始全区停机维护(请注意:2点将关 ...
紫禁繁花服务器维护一般多久,紫禁繁花手游2020年12月30日更新公告
国力庆典活动即将开启!上线即可领取新服饰哦!那么本次版本更新了哪些有趣的内容呢?下面就让我们一起来看一下吧~! 紫禁繁花手游2020年12月30日更新公告国力庆典活动参与[国力庆典]活动有机会获 ...
fastjson的漏洞解决—2020年5月28日
一.前言 fastjson真是不让人省心,2020年5月28日又报了漏洞. fastjson的作用: 将javabean序列化为json格式的字符串. 将json格式的字符串,反序列化为javabea ...
国家统计局2020年6月30日最新省/市/县三级json数据（不包含港澳台）
目录国家统计局2020年最新省/市/县json数据(不包含港澳台) 全部数据数据说明获取省级数据获取市级数据获取县级数据国家统计局2020年最新省/市/县json数据(不包含港澳台) 国家 ...
2020年9月30日晴
明天要放假,今天上班主要任务就是打扫卫生,领导要搞6s,车间的灰估摸这有一厘米厚,可苦了我们一线操作工,搞了一天,满身的灰,头发从都变成灰色的了,在下午三点的时候搞的差不多了,还好这会没人管,偷的把今 ...
2020年10月30日提高组 B 超级蚯蚓
文章目录 ResultResultResult HyperlinkHyperlinkHyperlink DescriptionDescriptionDescription SolutionSoluti ...
c51语言提供了code存储类型来访问,单片机原理与应用(C51编程+proteus仿真)第2版张毅刚--第3章课后习题答案2020年1月30日整理...
单片机原理与应用(C51编程+proteus仿真)第2版 -张毅刚课后习题参考答案第3章思考题及习题3 参考答案一.填空 1．与汇编语言相比, C51语言具有().().().和()等优点.答:可 ...

最新文章

热门文章