Question

这里我想在星期日为列添加背景颜色而不向其添加css类。我们可以在不添加css类和内联样式的情况下实现它吗？这是一个示例Fiddle

/ ------------------ HTML ---------------- /

<table>
<tr>
    <td>Sun</td>
    <td>Mon</td>
    <td>Tue</td>
    <td>Wed</td>
    <td>Thurs</td>
    <td>Fri</td>
    <td>Sat</td>
</tr>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
</tr>
      <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
</tr>

</table>

/ ------------------ CSS ---------------- /

table{
border:1px solid #ccc;
border-collapse:collapse;
padding:5px;
}
table td{
background:#f6f6f6;
padding:3px;
border:1px solid #ccc;
}

Answer 1

是的，你可以：

td:first-of-type将首先选择td，即所有行的第一个单元格。

table tr td:first-of-type{//your code}

Updated fiddle here.

Answer 2

是使用:first-child伪类。

table  tr:first-child > td:first-child{
    background-color :red;
}

以上版本适用于较旧的浏览器。您也可以使用Hiral所示的first-of-type。

<强> Working Fiddle

Answer 3

http://jsfiddle.net/uQRA9/2/

是的，你可以。

例如：

table td:first-child {
    background: red;
}

table td:nth-child(4) {
    background: blue;
}

Answer 4

像这样使用

    tr>td:nth-child(1){

       background-color:red;
    }

Answer 5

您可以使用此

设置太阳柱及其下方的所有样式

table   td:first-child{
  background-color :red;
}

demo

Answer 6

你可以通过css管理，:nth-child(0)属性提供了选择器指定的索引（0，.....，n）

table td:nth-child(0){
   background:#f6f6f6;
    padding:3px;
   border:1px solid #ccc;
}

AND

table tr:nth-child(0){
       background:#f6f6f6;
    }

Answer 7

table tr:first-child td:first-child {
   background:...;
   ...
}

我们可以在css中设置一列tds而不添加任何类吗？

7 个答案: