关于html：CSS：用另一个！important覆盖！important不起作用？


CSS: Overriding !important with another !important not working?

我确定我缺少一些简单的东西，但是在搜索了一会儿却没有找到任何答案之后，这是我的问题：

我正在为Joomla！开发组件。就功能而言，组件本身可以正常工作。但是，我要注意的是某些样式无效。

  • 我有一个包含在div中的表，每个表都有自己的类以供样式使用。
  • 样式工作正常，直到我测试了几个不同的模板以查看它们对样式的影响。
  • 由于来自各种模板的模板样式，我的表比窗口宽(模板在CSS中具有width:540px!important;)
  • 我试图对此进行覆盖的尝试是将width:100%!important;添加到组件输出中的

    标记中-在文档主体内部。这样可以确保最后加载我的CSS，这应该覆盖模板中的CSS。

  • 加载CSS的顺序如下：在文档的中：我的组件的CSS，然后是模板CSS。这导致我的CSS被模板覆盖。因此，我决定在主体标签内刚好在组件的div标签上方添加样式标签。

所有这些的结果是，我的CSS实际上是从组件开头div标签上方的style标签加载的最后一次。但是，模板中的CSS仍在应用在我的CSS上。

据我了解，使用！important开头并不是很好的做法，而用另一个！important覆盖它也不是一件好事。如果我错了，请纠正我，并提供一个可能的答案，说明如何覆盖模板的CSS，并确保应用了组件的CSS-无需直接修改模板；该组件应独立于模板，并且无论模板的样式如何，始终可以正常工作。

提前致谢。

/ *******编辑****** /

这是有问题的代码，以摘要形式显示(从模板中包含成千上万行代码是过大的做法，但是如果有必要，欢迎您要求更多代码)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html lang="en-gb" slick-uniqueid="3">
<head>
    <!-- Meta tags and other stuff -->

    <!-- MY CSS -->
    <link rel="stylesheet" href="/subdomainname/media/com_mycomponent/css/mystylesheet.css" type="text/css">

    <!-- ANNOYING TEMPLATE CSS, SNIPPET TO FOLLOW -->
    <link rel="stylesheet" href="http://mydomain.co.za/subdomainname/templates/annoyingtemplate/css/mobile.css" media="(max-width: 580px)">

</head>
<body>
    <!-- template stuff as there would be in any other template, menus and modules etc -->

    <style>
    <!-- a bunch of my own CSS, none related at all to the tables in question
        @media screen and (max-width:480px)
        {
            .sortSearchFilter table
            {
                width: 100%!important;
            }
        }
    </style>
   
        <!-- component HTML -->
       
            <table>
                <!-- table contents -->
            </table>
       
   

    </body>
</html>

我还尝试过为表格提供自己的类和样式，效果不是特别好-仍然被template :(这是上面提到的CSS模板文件的片段：

1
2
3
4
5
6
7
#gkMainbody table {
    width: 540px!important;
    display: block!important;
    padding: 30px 0 20px 0; /* padding for the scrollbars and the top message */
    overflow:scroll;
    -webkit-overflow-scrolling:touch;
}

这是chrome的检查器的两个屏幕截图：

Template CSS

My style tags...

/ **********第二编辑*********** /

感谢大家的宝贵意见。最后，我最终在自己的CSS中使用了min-width和max-width来应用高度。不是最大的解决方案，但它确实起作用。另外，我之前没有注意到表中的tbody也具有模板所应用的宽度，这似乎也干扰了我的样式。
向我的表添加类仍然没有太大帮助；尽管添加ID确实可以工作(通过向该ID添加CSS)-尽管我仍然必须对规则应用!important以确保覆盖CSS模板。

相关讨论

我不记得有什么用，但是我会尝试以下方法：

而不是使用

1
table {width:...!important}

使用(确保您的表具有ID)

1
#tableid {width:...!important}

或使用内联CSS

1
style="width:100%!important"

或者使用div代替table

有3种方法可以用CSS覆盖!important声明：

  • 添加更具体的！important属性：body table { width: 100% !important;}(例如)
  • 声明相同的规则，但在要覆盖的规则之后
  • 在HTML元素中声明它：

    请注意，所有这些都是肮脏的。

    相关讨论