CSS压倒一切的困境

Question

基本上，我在我的ASP.NET应用程序中有一个主题，它包含一个css文件，它将我所有的表都变成蓝色，这看起来很棒。

它看起来像这样

table
{
    background-color: #DEF1FF;
    border-color: #DEF1FF;
    color:#5793C9;
}
td
{
 // TD properties
}

但现在我想要一张桌子换成不同的颜色。我创建了一个类来覆盖它：

.BlankTable
{
    background-color:#FFFFFF;
    color:#5793C9;
    font-size:medium;
    font-weight:bold;
    margin:2px;
}

我设置了一个<table class="BlankTable">，我有两个问题：

首先，如果我将另一个表放入其中，它不会继承BlankTable，而是使用css文件的原始表部分

其次，如果我使用td部分来设置特定于td的属性(如填充)，在使用我放入<table class="BlankTable><tr><td>hello world</td></tr></table>文件中的td时，它不会带来跨<table class="BlankTable><tr><td>hello world</td></tr></table>的结果。

理想情况下，我想要的是像这样设置CSS代码：

.Blank
{
    background-color:#FFFFFF;
    color:#5793C9;
    font-size:medium;
    font-weight:bold;
    margin:2px;

    table { // properties }
    td { // properties }
}

因此，它使用我为.Blank css类指定的table/td属性。有没有办法做到这一点，或者以某种方式重构我的代码，这样我就可以让所有的表在默认情况下看起来都是蓝色的，并且能够轻松地覆盖它？

Answer 1

您可以这样做，但语法是：

.Blank
{
    background-color:#FFFFFF;
    color:#5793C9;
    font-size:medium;
    font-weight:bold;
    margin:2px;

}

.Blank table { // properties }
.Blank table td { // properties }

这最后两个规则将匹配一个表和位于类为"Blank“的任何内容中的td。

Answer 2

像这样使用它：

.Blank table {...}
.Blank td {...}

尽管我必须警告您:在极少数情况下，您应该在另一个表中使用另一个表。

Answer 3

其他答案是正确的，但值得指出的是，这只是CSS选择器的一种类型(后代选择器)。您可能希望使用各种其他CSS selectors来定位特定的元素。

熟悉它们是值得的-你可能会对可以(和不能)做的事情感到惊讶。(如果你熟悉jQuery选择器，使用CSS也会容易得多。)