如何将新的CSS规则添加到内部ID

Question

如何将新的CSS规则添加到内部ID

不是非常确定如何命名标题,但基本上我正在寻找的是如何在td标签内的类中添加特定的CSS样式,该类覆盖为td标签指定的样式.以下是我的html文件和我的CSS中的相关部分.

.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;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

所以问题是第二个td内部文本的样式与第一个样本完全相同.我在我的CSS中尝试了几种变体,但我不是一个Web开发人员,所以我大多只是在做试验和错误.

Answer 1

Seb*_*sch 5

您可以使用特定性解决的以下解决方案.在这种情况下,您必须定义更具体的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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，2 月前
查看次数：	54 次
最近记录：	9 年，2 月前