錶行樣式覆蓋由TD風格的CSS

EDIT3： http://jsfiddle.net/ZgTHa/錶行樣式覆蓋由TD風格的CSS

基本上我有一個表與包含在每一行中一個單選按鈕的1px的實心灰色邊框。我在通過單選按鈕選擇的行上應用1px紅色邊框。顏色不會改變。但是，如果我將紅色邊框設置爲2px，則會發生變化。

我認爲這與一些優先級問題有關，也就是說如果兩個邊界都是1px且兩者都是固定的，則應用td，如果td邊框爲虛線，則固定的一個適用於所選行。如果所選行的邊界寬度大於td，則情況相同。我想這就是它是如何在CSS（我可能是錯誤的，在這裏丟失的東西），但我想知道如何能夠相對容易解決這個問題（我可以設置一個背景圖像，並沒有任何邊界和如此，但似乎劇烈的）

編輯（什麼，我想說的）一個例子：

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-collapse

，如果你在TR等中的一個加一個「紅色邊框」級所以：

<tr class="red-border">

，並指定紅邊框類樣式像這樣：

.red-border { 
    1px solid red; 
}

它並不適用。但是，如果您添加：

.red-border { 
    2px solid red; 
}

它確實適用。如果您將td邊框設置爲虛線，則也是如此：

table, td, th 
{ 
    border:1px dotted black; 
}

並將紅色邊框保留爲1px純紅色，但它適用。

虐待只是解決它的樣式tds與特定的類，它被添加到點擊事件。我只是好奇，如果這是如何打算工作，或者我錯過了什麼？

EDIT2：

我已經應用的樣式，像這樣：

.red-border {    
       background-color: #fbfafa !important; 
       color: #571c20; 
       .first { 
        border-left: 1px solid #571c20 !important; 
        border-top: 1px solid #571c20 !important; 
        border-bottom: 1px solid #571c20 !important; 
       } 
       .second { 
        border-top: 1px solid #571c20 !important; 
        border-bottom: 1px solid #571c20 !important; 
       } 
       .third { 
        border-top: 1px solid #571c20 !important; 
        border-bottom: 1px solid #571c20 !important; 
       } 
       .fourth { 
        border-top: 1px solid #571c20 !important; 
        border-bottom: 1px solid #571c20 !important; 
        border-right: 1px solid #571c20 !important; 
       } 
      }

它仍然沒有有時適用。它適用於第一行，第二行上邊框不適用，第三行相同。在另一張桌子上，右邊框不適用。

來源

2013-07-10 Bando

請顯示您的代碼，並且css類只會覆蓋其他選擇器而不是樣式本身，除非它們在樣式中使用像'！important'。 –

在這個例子中我們甚至不需要*詢問代碼;我們如何在不知道自己實際在做什麼的情況下提供一個建議？ –

http://jsfiddle.net/ZgTHa/當我嘗試將紅色邊框設置爲1px時，就會出現問題。 – Bando

看來我已經找到了anwser：

.red-border { 
    border: 1px double red; 
}

即時猜測的雙重風格解析TR和TD邊界之間的衝突。

來源

2013-07-11 09:16:57 Bando

並非所有的樣式將用於TR元素的工作，像邊境例如

tr

但是，您可以輕鬆地將樣式表元素或td元素。

如果您想將邊框添加到tds。

例子：

http://jsbin.com/avihuc/1/edit

td { 
    border:solid black 1px; 
}

如果你想要更高的「優先級」（它實際上是所謂的特異性）

使用這樣的事情：

table tr td { 
}

戰勝

tr td {}

根據經驗爲特異性的規則，

ID selecotrs值得比元件選擇器的100倍以上。類的價值是元素選擇器的10倍以上。！

！重要的是超級特定的，可以作爲最後的手段使用。

來源

2013-07-10 20:30:31 user1721135

你*可以*設計tr元素，只是沒有邊界。 – cimmanon

我猜顯示沒有任何工作。但大多數東西不工作，如顏色，邊距，填充。 – user1721135

http://jsfiddle.net/ZgTHa/你也可以風格邊框。即時通訊的問題是當我將紅色邊框寬度更改爲1px。 – Bando

還有另一種方法來完成你想要的。不要爲tr設置樣式，你可以爲tr的子元素設置樣式 - td。既然你已經有了第一個td和最後一個的類，你甚至不必爲此使用僞類。例如，左邊框看起來像這樣：

tr.red-border td.first { 
    border-left: 1px solid red; 
}

這裏是完整的示例：http://jsfiddle.net/htn1cjoq/。我沒有改變你的HTML，只有CSS的一部分。希望能幫助到你。

來源

2017-10-31 11:50:06

錶行樣式覆蓋由TD風格的CSS

回答

相關問題