Css中的!important

转载自：https://www.cnblogs.com/cang12138/p/7326280.html

!important为开发者提供了一个增加样式权重的方法，比直接在元素的 style 属性中设置 CSS 声明还要高，一般用在 CSS 覆盖 JavaScript设置上。

<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>测试!Important</title>

</head>

<style type="text/css">

    #Box div

    {

        color: red;

    }

    .important_false

    {

        color: blue;

    }

    .important_true

    {

        color: blue !important;

    }

</style>

<body>

    <div id="Box">

        <div class="important_false">

            这一行末使用important</div>

        <div class="important_true">

            这一行使用了important</div>

    </div>

</body>

</html>

效果：

CSS代码第一行设定了box里面所有div中字体色为红色，第二行和第三行都用class重新定义了自身div的字体色为蓝色，

不同的是，第二行未使用!important，而第三行使用了!

总结：

第一行字体颜色是红色，可以证明，css样式设置中，id的优先级大于class，这行字还是红色。

第二行字体颜色是蓝色，可以证明，!important的优先级最高，important_true的css样式生效，这行字变为了蓝色！

特别说明：

!important在IE6中是不被识别的，例：

.testClass{

    color:blue !important; 
    color:red;

}

这种写法在IE6下是识别不到的，.testCalss最后显示为红色，但也可以通过更改下写法让IE6识别到!important

.testClass{

    color:blue !important;

}

.testClass{

    color:red;

}

巴特西

Css中的!important

最新文章

热门文章