如何在第二行選擇HTML表格的第二列到第五列？

Question

我知道

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

用來選擇第2行2列。

1. 如何選擇第2行第2列和第5列？

2. 如何選擇從第二行第二列開始的所有列？

Answer 1

1.如何選擇第二行第二列和第五列？

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

<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>

2.如何選擇從第2行的第2列開始所有列？

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

<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>

Answer 2

試試這個：

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>

Answer 3

第一個是關於第一個問題，第二個是關於第二個問題

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/