如何使用“first-child”将css规则应用于表列的所有单元格？

我有以下表如何使用“first-child”将css规则应用于表列的所有单元格？

<table class = "new-hire-table">          
    <tr> 
     <th>First Name</th> 
     <td><asp:TextBox ID="txtFName" runat="server" /></td> 
     <th>Last Name</th> 
     <td><asp:TextBox ID="txtLName" runat="server" /></td> 
    </tr> 
    <tr> 
     <th>Title</th> 
     <td><asp:DropDownList ID="ddlTitle" runat="server"></td> 

     <th>Position</th> 
     <td><asp:DropDownList ID="ddlPosition" runat="server"></td> 
    </tr> 
</table>

我想大小的首列50像素的最后一列至200像素;该表具有称为新租用表的css类。只是为了测试CSS规则，我试着应用背景颜色。

.new-hire-table tr th:first-child 
{ 
    background-color: Blue; 
}

但它不工作

来源

2013-02-26 Richard77

您应该特写类属性上的间距，以便'class =“new-hire-table”'变成'class =“new-hire-table”'。在你的CSS中，它应该是“th：first-child” – 2013-02-26 16:58:24

我猜它不工作，因为你有:firs，而不是:first-child在你的CSS。

这里有一个工作示例：http://jsfiddle.net/4UGVe/1/

.new-hire-table tr th:first-child{ 
    background-color: Blue; 
    width: 50px; 
} 

.new-hire-table tr td:last-child{ 
    background-color: red; 
    width: 200px; 
}

来源

2013-02-26 16:55:39

这只是我刚纠正的一个错字。 – Richard77 2013-02-26 17:04:06

它只在FF和Chrome中工作，而不在IE中。 – Richard77 2013-02-26 17:12:05

什么版本的IE？ IE7和以上将支持'：第一个孩子'，只有IE9和以上将支持'：最后一个孩子' – 2013-02-26 17:51:03

在你的评论说：“它的工作只有在FF和铬，而不是IE”（你应该补充的问题）。

由于发布的确切代码适用于符合文档的IE，因此显然是由Quirks Mode造成的，其中许多“新”CSS属性被忽略。

如果您正在开发新页面，请将<!doctype html>作为HTML文档的第一行添加并按标准对页面进行编码。如果这是一个依赖怪癖模式的旧页面，离开它可能会导致不可预知的问题;在这种情况下，考虑将class属性添加到相关单元格中，并使用类选择器而不是:first-child。

来源

2013-02-26 17:23:28

该网页取决于似乎一直在那里的母版页。看看母版页，这就是我看到的：。在此之前有一系列的页面指令。 – Richard77 2013-02-26 17:29:49

@ Richard77，那里的第一行*是什么？如果它包含适当的doctype字符串，那么该页面有哪些其他* CSS代码？其他设置可能会覆盖您的规则。 – 2013-02-26 17:56:05

母版页中的第一行代码是<％@ Master Language =“C＃”... />。第二，第三和第四是程序集注册，即像<％@ register assembly =“AjaxControlToolkit”../>。然后你有前面说的。 – Richard77 2013-02-26 18:10:35

如何使用“first-child”将css规则应用于表列的所有单元格？

回答

相关问题