Question

我有一个表元素

<table width="100%" cellspacing="4" cellpadding="0" border="0" id="nicktable">

在我的css课程中，我有2个课程

#nicktable
{
  background-color: Maroon;
}

和

table
{
    font-size: 1em !important;
    font-family: Tahoma, Verdana, sans-serif;
    border: none;

}

我希望该表使用可昵称的css，但它使用表css。我该如何解决这个问题？

Answer 1

实际上，它使用两个选择器（不是类），因为你的表匹配两个选择器。

Answer 2

这两个CSS规则都将适用于您的表（同时）。 table { }规则将应用于<table>元素，#nicktable {}规则仅适用于ID为nicktable的元素。如果您不希望将table { }规则应用于所有表，则可以将它们放在.mytable {}之类的类中，然后仅将其应用于所需的表。例如：

CSS

#nicktable {
  background-color: Maroon;
}
.mytable {
    font-size: 1em !important;
    font-family: Tahoma, Verdana, sans-serif;
    border: none;
}

HTML 的

<table id="nicktable" class="mytable">这将同时应用两种风格 <table id="nicktable">这将只应用background-color: Maroon; <table class="mytable">这将仅包含.mytable { }应用的样式。

修改

您还可以通过使用新值再次指定table {}中的#nicktable {}来覆盖属性。例如：

#nicktable { background-color: Maroon; font-family: Arial, sans-serif; border: 1px solid #000; }

由于#nicktable {}的{{3}}高于table {}，因此优先级最高。但是，使用!important时要小心。

Answer 3

首先，nicktable是一个id，也许你不止一次使用过它？否则我在这里看不到错误......

Answer 4

使用.nicktable和class =“nicktable”代替。如果您仍然需要该ID用于其他目的，请保留它。

Answer 5

你最好使用CSS类：

<table width="100%" cellspacing="4" cellpadding="0" border="0" class="maroon">

table
{
    font-size: 1em !important;
    font-family: Tahoma, Verdana, sans-serif;
    border: none;
}

.maroon
{
  background-color: Maroon;
}

Answer 6

Residuum是正确的。您的浏览器正在应用表格样式，然后添加id选择器#nicktable。您可以通过在nicktable中包含元素来覆盖表格样式。

这是一个很好的article about CSS specificity。

Css正在挑选错误的类

6 个答案: