Question

我在使用CSS时遇到了一些麻烦。我有许多具有类似格式名称的独特表格，我需要在其中一些表格上设置背景颜色。但是，如果我尝试使用通配符，则样式将被父CSS文件覆盖。

这里的背景颜色很好用：

#AllProtectedServers1 td.status.online{
    color: green;
    background-color: yellow;
    font-weight: bold;
}

但背景颜色在这里不起作用，因为它被覆盖得更高（尽管其他一切都有）：

td.status.online {
    color: green;
    background-color: yellow;
    font-weight: bold;
}

我将有20多个表都以＆＃34; AllProtectedServers＆＃34;开头，所以单独命名它们将使css变得巨大。无论如何我可以使用通配符吗？我尝试过使用div[id^='id_']和类似的选择器而没有任何运气。

任何人对我可以使用的内容有任何想法吗？

更新：请注意ID的是唯一的（AllProtectedServersCompany1，AllProtectedServersCompany2等），但它们都以AllProtectedServers开头。我想创建一些CSS，它将覆盖覆盖我的更改的表的样式表并使用通配符，因此我不必指定每个。

Answer 1

也许这会有所帮助：

td.status.online
{
   color: green;
   background-color: yellow !important;
   font-weight: bold;
 }

Answer 2

Alpipego的评论不正确。你可以使用ID选择器（＃）来完成CSS。这些可以被具有相同或更高特异性（取决于页面顺序）或!important规则的其他ID选择器覆盖。

但是，您希望避免将!important用作CSS规则，因为这可能会使您陷入困境并成为维护噩梦。

事实上，您需要了解的是CSS特性。我建议阅读CSS：特异性战争，以获得有关CSS特异性如何工作的有趣但有教育意义的概述。

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Smashing Magazine还发表了一篇更为广泛的文章：

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

你确实要小心不要特别疯狂。 ID是（应该是）每页唯一的，所以如果你最终得到很多深层嵌套的规则（#foo .bar .baz .goo），你可能正在考虑需要一些重构。

因此，如果您使用Chrome，请弹出开发工具并查看CSS选择器并确定其特异性。您所需要做的就是：

a）匹配特异性，但在DOM页面顺序中使您的样式更晚要么 b）使用更高的特异性

这就是真的。

我希望有所帮助！

干杯。

Answer 3

jmbertucci's answer非常正确，如果有点不完整，我会扩展一些检查。

CSS最容易被忽视的一个方面是特异性规则。正如jmbertucci所述，请参阅：

http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
多一点谷歌搜索将为您呈现丰富的文章。

让我们采取一些基本的html和CSS以及对你所拥有的东西的猜测。

<强> HTML

<table class="myTable">
    <tr>
        <td class="status online">Online</td>
        <td class="status offline">Offline</td>
    </tr>
</table>

<强> CSS

table.myTable td.status
{
    background-color:#fff;
}

td.status.online
{
    background-color:#f00;
}

Fiddle

这将导致白色背景为＆＃34;在线＆＃34;因为table.myTable td.status比td.status.online更具体。

在这个例子中，我们需要使第二个选择器更具体。正如您所提到的，添加ID会导致您想要的内容，因为ID具有极高的特异性分数且非常难以覆盖。所以有些人说永远不要使用它们^*。此示例中的一个简单解决方案是将table添加到seconde选择器。

table td.status.online
{
    background-color:#f00;
}

这导致＆＃34;在线＆＃34;

的红色背景

Fiddle

添加table可能不适用于您的实例。您需要找到使用Chrome开发者工具或Firebug for Firefox应用的样式规则，并创建更具体的规则。

如果您提供更多信息，我可能会提供更具体的答案。

^* 关于ID的说明 ID的极高特异性是它们的强弱和弱点。我相信它们可以使用，但要谨慎。如果您想以特定方式设置页面的特定部分的样式，可能拥有ID。在HTML5时代之前，请考虑页眉和页脚。另一个很好的例子可能是<section id="discalimer">，使用ID可以提供两个好处：它是特定样式的锚点，可以链接到，例如：<a href="#disclaimer">Disclaimer</a>。进一步阅读：http://www.zeldman.com/2012/11/21/in-defense-of-descendant-selectors-and-id-elements/

请记住，关于使用身份证或不使用身份证的论点是一个讽刺的问题，而且他们都是双方的好处。 W3C，标准人员，has no stance on this。如果你工作的地方有编码指南，坚持这个任务。如果您不确定，请不要在CSS中使用它们以确保安全。最重要的是保持ID唯一。

Answer 4

Andy68man，不需要通配符，只需使用一个类。如果它们共享相同的属性，则所有表的类相同。如（首先是HTML）：

<table class="allProtectedServers"> ..... </table>
<table class="allProtectedServers"> ..... </table>
<table class="allProtectedServers secondClass"> ..... </table>

和CSS：

.AllProtectedServers td.status.online { ... }

如果只有一些表有一个或多个属性，则创建另一个类并为这些特定表提供这两个类，如上面第三行HTML中所示。

或者，如果仍然被上面的CSS推翻，那么在所有表格甚至整个页面上放置一个div（或者可能已经有一个），给div一个id，然后将它添加到你的选择器中增加它的特殊性（上面的第一段代码显示额外的id将足以否决引起问题的其他CSS）：

#myDiv td.status.online { ... }

使用通配符的表中的td的CSS

4 个答案: