Question

我有一个简单的表格和相关的CSS规则，如下所示：
HTML：

<table id="depts">
            <tr>
                <th>Department</th>
                <th>Posts</th>
            </tr>

            <tr>
                <td colspan="2" class="none"> No Posts in this department</td>
            </tr>
</table>

CSS：

#depts {
      width: 500px;
      font-family: 'Open Sans', sans-serif;
      border-spacing: 0;
      border: 1px solid black;
  }
  #depts td{
      border-top: 2px solid #607D8B;      
      text-align: left;
      font-family: 'Patua One', cursive;
      padding: 10px;
  }
  .none {
      text-align: center;
      padding-top: 40px;
  }

可以看出，我为名为td的{{1}}添加了一个新类。文本对齐属性已从none更改为left但是当我运行页面时它没有反映出来。输出如下：

为什么新规则被忽略。center与它有什么关系？

Answer 1

将“重要”标志添加到无类，如下所示：

.none {
      text-align: center!important;
      padding-top: 40px;
  }

Answer 2

只需在#depts声明之前添加.none。

.none课程的优先级低于#depts td。

您可以查看优先顺序here或here

＆＃13;

#depts {
      width: 500px;
      font-family: 'Open Sans', sans-serif;
      border-spacing: 0;
      border: 1px solid black;
  }
  #depts td{
      border-top: 2px solid #607D8B;      
      text-align: left;
      font-family: 'Patua One', cursive;
      padding: 10px;
  }
 #depts .none {
      text-align: center;
      padding-top: 40px;
  }

＆＃13;

<table id="depts">
            <tr>
                <th>Department</th>
                <th>Posts</th>
            </tr>

            <tr>
                <td colspan="2" class="none"> No Posts in this department</td>
            </tr>
</table>

＆＃13;

Answer 3

您的规则被忽略（并未真正被忽略），因为它的specificity较低（参见：CSS Specificity: Things You Should Know）。

您可以使用：

#depts td.none {
    text-align: center;
    padding-top: 40px;
}

Answer 4

ID优先级高于类，因此您可以添加

 #depts .none {
      text-align: center;
      padding-top: 40px;
  }

或

.none {
      text-align: center!important;
      padding-top: 40px;
  }

可以找到CSS特异性here

无法覆盖以前定义的css规则

4 个答案: