如何防止一個表不順從的CSS規則

Question

我已經在我的樣式表下面的CSS增加了一個計數器每一行對應用中的所有表：

tbody { 
    counter-reset: rowNumber; 
} 

tbody tr { 
    counter-increment: rowNumber; 
} 

tbody tr td:first-child::before { 
    content: counter(rowNumber); 
    min-width: 1em; 
    margin-right: 0.5em; 
} 

我現在有一個表，我不要不想在該網站生成的分數表中添加計數器，即違反CSS規則。我是否需要爲那些我希望遵守這些規則的表的三個表元素設置一個唯一的類名，然後相應地更改CSS？啊。只是覺得可能有這樣一種說法，'不要在這張桌子上跟隨CSS'來處理這種情況。

Answer 1

您可以嚮應忽略計數器樣式的表中添加一個類（例如，no-counter）。然後改變你的風格，像這樣：

table:not(.no-counter) tbody { 
    counter-reset: rowNumber; 
} 

table:not(.no-counter) tbody tr { 
    counter-increment: rowNumber; 
} 

table:not(.no-counter) tbody tr td:first-child::before { 
    content: counter(rowNumber); 
    min-width: 1em; 
    margin-right: 0.5em; 
} 

所以表應該不設有專櫃應該是這樣的：

<table class="no-counter"> 
    ... 
</table> 

更多信息有關:nothere。

Answer 2

最好的解決方案是疊加應用樣式。也就是說，添加一個類所有您的表，然後更改CSS：

.mytable tbody {} 
.mytable tbody > tr {} 

等。您幾乎總是會遇到<table> s，您不希望使用特定的站點範圍樣式，然後像離開表元素中的mytable類一樣簡單。

如果你不能做到這一點，另一種選擇是:not()選擇：排除所有的表與類plain：

table:not(.plain) tbody {}