Html CSS样式不被应用

我想为表中的第一行应用背景色。我给那一行起了一个特殊的类名。我还想为表的其余行应用另一种颜色。不应用行颜色

.table{
字体系列：无衬线；
宽度：自动；
溢出：自动；
显示：块；
边界：1；
}
/*我想让有班长的那一排是这种颜色*/
.头{
背景颜色：黄色；
}
/*我希望桌子的其他行是这种颜色的*/
.表td{
背景颜色：浅蓝色；
}

名称
类型
此处文本
此处文本
此处文本
此处文本

删除

tr

中的类

标题

，然后添加

！重要信息

。由于某些原因，没有

，颜色不会改变！重要信息

即使我重新安排了css

.table{
字体系列：无衬线；
宽度：自动；
溢出：自动；
显示：块；
边界：1；
}
/*我想让有班长的那一排是这种颜色*/
.头{
背景色：黄色！重要；
}
/*我希望桌子的其他行是这种颜色的*/
.表td{
背景颜色：浅蓝色；
}

名称
类型
此处文本
此处文本
此处文本
此处文本

删除

tr

中的类

标题

，然后添加

！重要信息

。由于某些原因，没有

，颜色不会改变！重要信息

即使我重新安排了css

.table{
字体系列：无衬线；
宽度：自动；
溢出：自动；
显示：块；
边界：1；
}
/*我想让有班长的那一排是这种颜色*/
.头{
背景色：黄色！重要；
}
/*我希望桌子的其他行是这种颜色的*/
.表td{
背景颜色：浅蓝色；
}

名称
类型
此处文本
此处文本
此处文本
此处文本

您的问题在于具体性和顺序-由于您在

td

上放置了浅蓝色，您也需要在

td

上用黄色覆盖它

然后，您需要将黄色声明移到初始声明下方，因为它具有相同的特殊性-这意味着语句的顺序很重要

最后一件事-从表中删除

display:block

，否则会破坏表的布局

.table{
字体系列：无衬线；
宽度：自动；
溢出：自动；
边界：1；
宽度：100%；
/*从此处删除显示块，否则您的表格布局将中断*/
}
/*把这个放在第一位*/
.表td{
背景颜色：浅蓝色；
}
/*用这个覆盖*/
.运输署署长{
背景颜色：黄色；
}

名称
类型
此处文本
此处文本
此处文本
此处文本

您的问题在于具体性和顺序-由于您在

td

上放置了浅蓝色，您也需要在

td

上用黄色覆盖它

然后，您需要将黄色声明移到初始声明下方，因为它具有相同的特殊性-这意味着语句的顺序很重要

最后一件事-从表中删除

display:block

，否则会破坏表的布局

.table{
字体系列：无衬线；
宽度：自动；
溢出：自动；
边界：1；
宽度：100%；
/*从此处删除显示块，否则您的表格布局将中断*/
}
/*把这个放在第一位*/
.表td{
背景颜色：浅蓝色；
}
/*用这个覆盖*/
.运输署署长{
背景颜色：黄色；
}

名称
类型
此处文本
此处文本
此处文本
此处文本

在addiction to中，我想说的是，如果要创建一个表头以使用适当的标记

名称
类型
此处文本
此处文本
此处文本
此处文本

在addiction to中，我想说的是，如果要创建一个表头以使用适当的标记

名称
类型
此处文本
此处文本
此处文本
此处文本

我想应该是上面的代码

---

我认为应该是上面的代码。

一个解决方案是增加

.head的CSS设置


.table{
字体系列：无衬线；
宽度：自动；
溢出：自动；
显示：块；
边界：1；
}
/*我想让有班长的那一排是这种颜色*/
.桌子.头{
背景颜色：黄色；
}
/*我希望桌子的其他行是这种颜色的*/
.表td{
背景颜色：浅蓝色；
}

名称
类型
此处文本
此处文本
此处文本
此处文本
一种解决方案是增加
.head的CSS设置


.table{
字体系列：无衬线；
宽度：自动；
溢出：自动；
显示：块；
边界：1；
}
/*我想让有班长的那一排是这种颜色*/
.桌子.头{
背景颜色：黄色；
}
/*我希望桌子的其他行是这种颜色的*/
.表td{
背景颜色：浅蓝色；
}

名称
类型
此处文本
此处文本
此处文本
此处文本
正如@Pete所提到的，您的特殊性是不正确的。另一方面，可以改进HTML标记以使用
，然后css可以简单地针对
中的
元素。这对于可访问性更好，因为它清楚地将“head”定义为表头

请查看
markup for accessibilty@上的w3c文档
或者，有关标记的一般信息，请查看惊人的Mozilla文档@

大概是这样的：

.table{
字体系列：无衬线；
宽度：自动；
溢出：自动；
<tr>
  <th class="head">Name</th>
  <th class="head">Type</th>
</tr>

<tr id="head" class="head">
    <th class="head">Name</td> <!-- change to th (table heading) -->
    <th class="head">Type</td>
</tr>

th{
    background-color: yellow;
}

/*I want the rest of the table rows this color*/

.table tr {
  background-color: lightblue;
}


/*I want the row with class head to be this color*/

.head {
  background-color: yellow;
}