css优先级问题

最新推荐文章于 2023-02-17 14:57:34 发布

会长大的菜鸟

最新推荐文章于 2023-02-17 14:57:34 发布

阅读量240

点赞数

分类专栏： html 文章标签： css

本文链接：https://blog.csdn.net/qq_42370505/article/details/106578517

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css优先级问题

在学习css和html时候，遇到过定位，浮动是比较麻烦，其余的就是标签属性的记忆，今天在学习js的时候遇到了另一个问题，就是它的优先级问题，这个一开始没发现是因为自己写的时候一般都使用的一种级别的标签，昨天写css时候遇到了，今天又听了老师视频讲解，有了一个了解。

首先定义两个按钮，分别可以使其变绿，变红，一个用行间样式，一个用class样式，这里再补充一下：

行内样式（行间样式）< style=“width: height:”>	1,0,0,0
id:	0,1,0,0
class:	0,0,1,0
tag:	0,0,0,1
*	最小

！important修改权重

如非特殊情况，慎用!important。因为使用!important会扰乱原本层叠和权重产生正常的作用顺序，使后期维护带来麻烦。

style改变的是行间样式即写在< style=“width: height:”>这是样式表样式属于类或者id选择器样式：

从左往右比，大的就不用比了

优先级相加：

记住不进位，只相加减

相同优先级，后者覆盖前者

一个标签写两个是为了改变权重

在js中举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .box{
            background-color: green;
        }
    </style>
   <script>
       function togreen() {
           var cd = document.getElementById('a');
           // class样式
           cd.style.backgroundColor='green';
       }
       function tored() {
           var ab = document.getElementById('a');
           //行间样式  行间样式大于class样式，所以不能再变回去
           ab.style.backgroundColor='red';
       }
   </script>
</head>
<body>
<input type="button" value="绿色"  onclick="togreen()">
<input type="button" value="红色"  onclick="tored()">
<div id="a"></div>
</body>
</html>

结果一开始为绿色，按变红色按钮以后无法再变回绿色因为优先级被覆盖了，所以没法改变，在js中，如果同时设置style,和className，则无法再次改变颜色，解决的方式是，都用一样的就可以变回去了

总结

在写css的时候，要解决好优先级问题，这种错误不会报错，但是就是不出现样式，所以当你写代码的时候要是遇到这种问题，就考虑一下是否是

优先级问题，我们在写的时候要留意这个问题，省的耽误时间

会长大的菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css优先级问题

css优先级问题在学习css和html时候，遇到过定位，浮动是比较麻烦，其余的就是标签属性的记忆，今天在学习js的时候遇到了另一个问题，就是它的优先级问题，这个一开始没发现是因为自己写的时候一般都使用的一种级别的标签，昨天写css时候遇到了，今天又听了老师视频讲解，有了一个了解。首先定义两个按钮，分别可以使其变绿，变红，一个用行间样式，一个用class样式，这里再补充一下：行内样式（行间样式）< style=“width: height:”>1,0,0,0id:0
复制链接

扫一扫