Question

我确信我遗漏了一些简单的东西，但在搜索了一段时间后却没有找到任何答案，这就是我的问题：

我正在为Joomla开发一个组件！就功能而言，组件本身工作正常。然而，我注意到一些造型并不起作用。

我有一个包含在div中的表，每个表都有自己的类用于样式目的。
样式工作正常，直到我测试了几个不同的模板，看看它们对我造型的影响。
由于来自各种模板的模板样式，我的表格比窗口宽（模板在其CSS中有width:540px!important;）
我尝试覆盖这一点是为了在组件的输出中添加width:100%!important;到<style></style>标签 - 在文档正文内。这将确保我的CSS最后加载，这应该覆盖模板中的CSS。
正在加载的CSS顺序如下：在文档的<head></head>中：我的组件的CSS，然后是模板CSS。这会导致我的CSS被模板覆盖。因此，我决定在我的组件的开始div标签上方的body标签中添加样式标记。

所有这一切的结果是我的CSS确实最后加载，来自我的组件正在打开div标签上方的样式标签。然而，模板中的CSS仍然应用于我的。

根据我的理解，使用它并不是很好的做法！重要的是开始使用，并用另一个重写它！重要的也不是很好。如果我错了，请纠正我，以及如何覆盖模板的CSS以及确保我的组件的CSS被应用的可能答案 - 而无需直接修改模板;组件应该是模板独立的，无论模板的样式如何，它都始终有效。

提前致谢。

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

以下是有问题的代码 - 摘要形式（从模板中包含大量代码可能会有些过分，但如果有必要，欢迎您提出更多代码）：

<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>
    <div class="mycomponent">
        <!-- component HTML -->
        <div class="sortSearchFilter">
            <table>
                <!-- table contents -->
            </table>
        </div>
    </div>

    </body>
</html>

我也尝试过给它自己的课程和造型，这并不是特别好 - 仍然被模板覆盖:(这是一个片段来自上面提到的模板CSS文件：

#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被覆盖。

Answer 1

我无法记住哪些有效，但我会尝试这样做：

而不是使用

table {width:...!important}

使用（确保你的表有id）

#tableid {width:...!important}

或使用内联css

style="width:100%!important"

或者使用div而不是table

Answer 2

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

添加更具体的！重要属性：body table { width: 100% !important;}（例如）
声明相同的规则，但在您要覆盖的规则之后
在HTML元素中声明它：<table style="width:100%">

请注意，所有这些都很脏。

CSS：覆盖！与另一个重要！重要的是不工作？

2 个答案: