【发布时间】：2014-09-16 12:29:52
【问题描述】：
我确定我遗漏了一些简单的东西，但是在搜索了一段时间并没有找到任何答案之后，这是我的问题：
我正在为 Joomla! 开发一个组件。就功能而言，组件本身可以正常工作。但是，我确实注意到某些样式不起作用。
- 我有一个包含在 div 中的表，每个表都有自己的类用于样式设置。
- 在我测试了几个不同的模板以查看它们对我的样式的影响之前，样式工作正常。
- 由于各种模板的 template 样式，我的表格比窗口宽（模板的 CSS 中有
width:540px!important;） - 我试图覆盖它是在组件的输出中添加
width:100%!important;到<style></style>标记 - 在文档正文中。这将确保我的 CSS 最后加载，它应该覆盖模板中的 CSS。 - 加载CSS的顺序如下：在文档的
<head></head>中：我的组件的CSS，然后是模板的CSS。这会导致我的 CSS 被模板覆盖。因此，我决定在我的组件的开始 div 标签上方的 body 标签内添加样式标签。
所有这一切的结果是我的 CSS 确实是最后加载的，从我的组件的开始 div 标记上方的样式标记。然而，模板中的 CSS 仍然应用在我的身上。
据我了解，一开始就使用 !important 不是很好的做法，而用另一个 !important 覆盖它也不是很好。如果我错了，请纠正我，以及关于如何覆盖模板的 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 文件中的一个 sn-p上面提到的：
#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 检查器的屏幕截图：
/********** 第二次编辑 ***********/
感谢大家的好建议。最后，我在自己的 CSS 中使用了min-width 和 max-width 来应用高度。不是最好的解决方案，但它似乎确实有效。此外，我之前没有注意到表格中的tbody 也具有模板应用的宽度，这似乎也与我的样式混淆。
在我的表中添加一个类仍然没有多大帮助。尽管添加 ID 确实有效（通过向该 ID 添加 CSS） - 尽管我仍然必须将 !important 应用于规则以确保模板 CSS 被覆盖。
【问题讨论】：
-
“这将确保我的 CSS 是最后加载的，这应该会覆盖模板中的 CSS”——这不是 CSS 的工作方式。 w3.org/TR/CSS21/cascade.html#cascade
-
!important不应该被动使用，只能主动使用。最后加载的!important标记，也就是最后包含在您的代码中，将是样式化的标记。 -
@user3008011 — 正如我之前评论中的链接所指出的那样，这不一定是真的。
-
模板正在使用
table { width:540px!important; }?真的？您如何在组件中应用 100% 宽度样式？你能出示你的代码吗？老实说，你永远不会为每个模板找到完美的东西，因为很多模板开发人员认为使用!important供自己使用是可以的，这意味着扩展开发人员无法轻松地为他们的扩展设置样式 -
尝试在表格中添加一个类并在 CSS 中定位该类