如何在第二行中选择HTML表的第二列到第五列?

时间:2015-08-18 15:01:16

标签: css css-selectors

我知道

tr:nth-child(2) > td:nth-child(2)

用于选择第2行的第2列。

  1. 如何在第2行的第2列和第5列之间进行选择?

  2. 如何选择从第2行第2列开始的所有列?

3 个答案:

答案 0 :(得分:5)

<强> 1。如何在第2行的第2列和第5列之间进行选择?

&#13;
&#13;
tr:nth-child(2) > td:nth-child(n+2):nth-child(-n+5) {
  color: red;
}
&#13;
<table>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
</table>
&#13;
&#13;
&#13;

<强> 2。如何从第二行的第二列开始选择所有列?

&#13;
&#13;
tr:nth-child(2) > td:nth-child(n+2) {
  color: red;
}
&#13;
<table>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

试试这个:

tr:nth-child(2) > td:nth-child(n+2):nth-child(-n+5) {
  color: red;
}
<table>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>six</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>six</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>six</td>
  </tr>
</table>

答案 2 :(得分:0)

第一个是第一个问题,第二个问题是第二个问题

tr:nth-child(1) > td:nth-child(n+2):nth-child(-n+5){
    color: pink;
}

tr:nth-child(2) > td:nth-child(n+2){
    color: pink;
}

请参阅小提琴http://jsfiddle.net/ncqmycz7/