通過分配類來更改表格td邊框顏色

單擊按鈕時，我想更改表格某些部分的邊框顏色。這是一個更大的項目，但我已經能夠在這裏重現問題 -通過分配類來更改表格td邊框顏色

CSS：

table, tr, td 
{ 
    border:1px solid #999; 
    padding:8px; 
    border-collapse: collapse; 
    background-color: #FFF; 
} 

/*comment this line out and it works*/ 
#div1 table, #div1 td { border-color:White;} 

.colorborder{border:1px solid Red}

CSS樣式「表，TR，TD」是一個CSS文件由項目中的所有頁面使用。然而，對於這個特定的頁面，我不想黑色邊框，這就是爲什麼我想添加樣式「＃div1 table，＃div1 td」（注意指定「border：none」具有相同效果）的原因。但是，添加這使jquery操作停止工作。

任何人都知道發生了什麼事？

來源

2012-08-01 Lala

這是一個與css 特定問題。如果您使用瀏覽器的DOM調試器，則會看到樣式#div1 td優先於.colorborder。發生這種情況是因爲ID比一個類更具體。

試着改變你的CSS閱讀：

#div1 td.colorborder{border:1px solid Red}

您可以閱讀w3.org的計算特異性here規則。如果你打算用CSS做任何認真的Web開發，理解它的工作原理是很好的。

簡要介紹CSS特異性

在一般情況下，這裏就是你需要知道：

元素名稱（如li和td標籤名）具有最低的特異性。 ...
...其次是類和屬性（如[name=firstname]）...
...後跟ID（如#div1）...
...以最高特異性進入內嵌style="..."屬性。

另外，對上述多個實例給出了更高的特異性。所以如果一個樣式被分配到table td而另一個樣式被分配到table tbody tr td，那麼第二個樣式會勝出，因爲更多的標籤名稱使得它更具體。

當然，你能碰到的東西更高的通過CSS使用!important，但是這真的不該除非在特殊情況下使用（例如，你想與class="red"東西是紅色的，無論在您使用它）。否則，你會發現自己在整個CSS中使用它，其中一個!important根據特定規則覆蓋另一個，並且它通常被認爲是草率編碼。

來源

2012-08-01 13:20:13 Blazemonger

更改

#div1 table, #div1 td { border-color:White;}

到

table#div1, td#div1 { border-color:White;}

工作過。

來源

2012-08-01 13:21:10 amiregelz

你的問題是在CSS我認爲不是在jQuery中。

與你的CSS的

最後一行... #div1 table.colorborder, #div1 td.colorborder{border:1px solid red} 原因是是#div1如果你有.colorborder{...}進一步下跌的頁面ID選擇將更高的優先級，無論...

來源

2012-08-01 13:21:20 Val

這條線：

#div1 table, #div1 td { border-color:White;}

被元素的ID（＃）引用，這使得它的層次高於其他任何普通類規則。

爲了讓其他規則可以正常工作，您需要爲它們添加ID選擇器，以便它們可以覆蓋先前的規則的層次結構。

#div1 .colorborder{border:1px solid Red}

來源

2012-08-01 13:21:23 Rodik

你有一個specificity問題，這意味着具有白色選擇具有比紅色更專一。

現在檢查：http://jsfiddle.net/RZ7UP/12/

來源

2012-08-01 13:21:32 NicoSantangelo

這是因爲ID具有更高特異性類

來源

2012-08-01 13:24:21 Struppi

通過分配類來更改表格td邊框顏色

回答

相關問題