如何新的CSS規則添加到內ID

是不是exatcly知道如何命名冠軍，但基本上就是我要找的是如何將特定CSS樣式添加到一個類中的覆蓋指定的風格TD標籤內爲td標籤。以下是我的html文件和CSS的相關部分。如何新的CSS規則添加到內ID

.content 
 
{ 
 
    height:auto; 
 
    padding:0 0 10px 0; 
 
} 
 

 
.content th 
 
{ 
 
    font:bold 14px Arial, Helvetica, sans-serif; 
 
    color:#6878AB; 
 
    text-align: left; 
 
    padding:5px 0 0px 10px; 
 
} 
 
.content td 
 
{ 
 
    font:12px Arial, Helvetica, sans-serif; 
 
    color:#3f4244; 
 
    padding:5px 0 0px 10px; 
 
    font-size:13px; 
 
} 
 

 
.DisplayRow2 
 
{ 
 
    color:green; 
 
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> 
 
<link href="meny.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 

 
<div class="content"> 
 
<table boarder=0> 
 

 
<tr> 
 
    <td class="DisplayRow1" id="DisplayRow1">Text 1</td> 
 
</tr> 
 
<tr> 
 
    <td class="DisplayRow2" id="DisplayRow2">Text 2</td> 
 
</tr> 
 
</table> 
 
</div> 
 
    
 
</body> 
 
</html>

所以問題是，第二個TD內的文本樣式exatcly一樣的第一個。我在CSS中嘗試了幾種變體，但我不是Web開發人員，所以我只是在做試驗和錯誤。

來源

2016-12-08 Jesper Evertsson

您可以使用以下解決方案的特異性解決方案。在這種情況下，您必須定義更具體的CSS規則來覆蓋另一個現有規則。另一個更具體的CSS規則是!important屬性。你可以找到關於此主題在這裏更多的信息：https://developer.mozilla.org/en/docs/Web/CSS/Specificity

.content { 
 
    height:auto; 
 
    padding:0 0 10px 0; 
 
} 
 
.content th { 
 
    font:bold 14px Arial, Helvetica, sans-serif; 
 
    color:#6878AB; 
 
    text-align: left; 
 
    padding:5px 0 0px 10px; 
 
} 
 
.content td { 
 
    font:12px Arial, Helvetica, sans-serif; 
 
    color:#3f4244; 
 
    padding:5px 0 0px 10px; 
 
    font-size:13px; 
 
} 
 
.content td.DisplayRow1 { 
 
    color:blue; 
 
} 
 
.content td.DisplayRow2 { 
 
    color:yellow; 
 
}

<div class="content"> 
 
    <table boarder=0> 
 
    <tr> 
 
     <td class="DisplayRow1" id="DisplayRow1">Text 1</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="DisplayRow2" id="DisplayRow2">Text 2</td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2016-12-08 09:30:49

你可能想解釋爲什麼這個工作（特異性和所有） – Goombah

謝謝，這工作。可以發誓我已經試過這個，但顯然不是 –

添加!important到第二個TD，像這樣：

.content 
 
{ 
 
    height:auto; 
 
    padding:0 0 10px 0; 
 
} 
 

 
.content th 
 
{ 
 
    font:bold 14px Arial, Helvetica, sans-serif; 
 
    color:#6878AB; 
 
    text-align: left; 
 
    padding:5px 0 0px 10px; 
 
} 
 
.content td 
 
{ 
 
    font:12px Arial, Helvetica, sans-serif; 
 
    color:#3f4244; 
 
    padding:5px 0 0px 10px; 
 
    font-size:13px; 
 
} 
 

 
.DisplayRow2 
 
{ 
 
    color:green !important; 
 
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> 
 
<link href="meny.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 

 
<div class="content"> 
 
<table boarder=0> 
 

 
<tr> 
 
    <td class="DisplayRow1" id="DisplayRow1">Text 1</td> 
 
</tr> 
 
<tr> 
 
    <td class="DisplayRow2" id="DisplayRow2">Text 2</td> 
 
</tr> 
 
</table> 
 
</div> 
 
    
 
</body> 
 
</html>

來源

2016-12-08 09:32:19 Abood

感謝這工作。從未聽說過！重要之前 –

使用重要

.DisplayRow2 
{ 
    color:green !important; 
}

這是覆蓋以前的顏色代碼值。

來源

2016-12-08 09:34:42 bala

當不需要時，不應使用'！important'。 – Goombah

嘗試類似這樣的事情。

您已經可以定義.content td類color CSS規則。所以.DisplayRow2 class css不起作用。

添加CSS規則下面在你的CSS

.DisplayRow2{ 
    color: green !important; 
}

.content 
 
{ 
 
    height:auto; 
 
    padding:0 0 10px 0; 
 
} 
 

 
.content th 
 
{ 
 
    font:bold 14px Arial, Helvetica, sans-serif; 
 
    color:#6878AB; 
 
    text-align: left; 
 
    padding:5px 0 0px 10px; 
 
} 
 
.content td 
 
{ 
 
    font:12px Arial, Helvetica, sans-serif; 
 
    color:#3f4244; 
 
    padding:5px 0 0px 10px; 
 
    font-size:13px; 
 
} 
 

 
.DisplayRow2{ 
 
    color: green !important; 
 
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> 
 
<link href="meny.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 

 
<div class="content"> 
 
<table boarder=0> 
 

 
<tr> 
 
    <td class="DisplayRow1" id="DisplayRow1">Text 1</td> 
 
</tr> 
 
<tr> 
 
    <td class="DisplayRow2" id="DisplayRow2">Text 2</td> 
 
</tr> 
 
</table> 
 
</div> 
 
    
 
</body> 
 
</html>

來源

2016-12-08 09:41:25

另一個解決方案是風格孩子TR：

這顏色只有2次行：

.content tr:nth-child(2) td

這將僅彩色最後一行：

.content tr:last-child td

這將色彩，除了第一個

.content tr:not(:first-child) td

.content 
 
{ 
 
    height:auto; 
 
    padding:0 0 10px 0; 
 
} 
 

 
.content th 
 
{ 
 
    font:bold 14px Arial, Helvetica, sans-serif; 
 
    color:#6878AB; 
 
    text-align: left; 
 
    padding:5px 0 0px 10px; 
 
} 
 
.content td 
 
{ 
 
    font:12px Arial, Helvetica, sans-serif; 
 
    color:#3f4244; 
 
    padding:5px 0 0px 10px; 
 
    font-size:13px; 
 
} 
 

 
.content table tr:nth-child(2) td 
 
{ 
 
    color:green; 
 
}

<div class="content"> 
 
<table boarder=0> 
 

 
<tr> 
 
    <td class="DisplayRow1" id="DisplayRow1">Text 1</td> 
 
</tr> 
 
<tr> 
 
    <td class="DisplayRow2" id="DisplayRow2">Text 2</td> 
 
</tr> 
 
</table> 
 
</div>

來源

2016-12-08 09:41:37 Banzay

檢查了這一點的所有行。https://developer.mozilla.org/en/docs/Web/CSS/Specificity 你的代碼改成這樣，這一個理想

td.DisplayRow2 {color:green;}

，或者你可以做到這一點，儘量減少使用！重要的標記，因爲它會增加併發症，這是不使用覆蓋CSS規則的好做法這，

.DisplayRow2 {color:green !important;}

來源

2016-12-08 09:53:06

如何新的CSS規則添加到內ID

回答

相關問題