css - 如何刪除遺傳樣式

請參閱：http://jsfiddle.net/ymSpY/。如果你可以看到<td>有一個內表。內表繼承父表的樣式。內表有邊框。我如何使邊框不可見或將其刪除？正如你可以看到內表的標記它有style="border-collapse: collapse;"，我甚至嘗試border=0，但它不起作用。內/子表的邊界仍然存在。css - 如何刪除遺傳樣式

來源

2012-05-16 TheOnlyIdiot

我可能會創建一個子表一個單獨的類，但短期的，這裏是一個解決方案：

.dataTable td table, .dataTable td table tbody, .dataTable td table td { 
    border:none; 
}

http://jsfiddle.net/ymSpY/6/

編輯：這裏有一個爲子表定義的類，當您開始向主數據表中添加其他元素時，這可能會給您更多的靈活性。 http://jsfiddle.net/ymSpY/11/

來源

2012-05-16 06:30:50 Tom

它工作！非常感謝！！！ – TheOnlyIdiot

你打賭！請享用：） – Tom

您可以將您的規則只對眼前的孩子：

.dataTable > thead, 
.dataTable > thead > tr > th, 
.dataTable > tbody, 
.dataTable > tbody > tr > td { 
    padding:  2px; 
    border-top: 1px solid #F5F2EF; 
    border-left: 1px solid #F5F2EF; 
    border-bottom: 1px solid #F5F2EF; 
    border-right: 1px solid #F5F2EF; 
}

這樣，邊界規則沒有涓滴的嵌套表。唯一的另一種選擇是做大量的重置，這將很快導致你的CSS變成葛根。

演示：http://jsfiddle.net/ymSpY/10/

來源

2012-05-16 06:23:33 Sampson

我試過了，現在它仍然存在。 – TheOnlyIdiot

爲什麼表格最右邊的部分有紅色邊框？ – TheOnlyIdiot

@TheOnlyIdiot忽略那個 - 我在亂搞。這裏最重要的是'''表示規則只適用於直接的孩子。 – Sampson

我很困惑。你改變了邊界的顏色，爲什麼不把它們設置爲0呢？

.dataTable td table td { 
    border-top: 0; 
    border-left: 0; 
    border-bottom: 0; 
    border-right: 0; 
}

例http://jsfiddle.net/ymSpY/4/

來源

2012-05-16 06:25:13 LeeR

如何刪除內部表的繼承樣式？ – TheOnlyIdiot

用另一種風格重寫它。您無法刪除繼承的樣式，因爲這是瀏覽器在默認情況下提供的樣式。 – LeeR

我不想刪除父表的邊框。 – TheOnlyIdiot

css - 如何刪除遺傳樣式

回答

相關問題