使用 css class 为 HTML 表的特定行或列设置样式

Question

我在 html 有一张桌子，上面有一张 CSS class “风格”。 这个 class 应该如何用于设置表格中特定行或列的样式？

以下是HTML代码：

 <table class="style"> <tbody> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </tbody> </table>

我想单独设计第一行。 如果我们只有第一个 tr 标签的 class 就可以做到这一点。 但是如何使用 class “风格”做同样的事情？

Answer 1

您可以尝试以下代码段。
这是:nth-child()的解释。

 .style tbody>:nth-child(1) { background: red; }

 <table class="style"> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </tbody> </table>

Answer 2

您可以使用名为nth-child的伪 class 选择器，它采用元素的 position 编号的参数。

下面是一个例子

 .style { border: 1px solid olive; width: 100px; }.style tr:nth-child(1) { background: red; }.style tr:nth-child(2) { background: blue; }.style tr:nth-child(3) { background: green; }

 <table class="style"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>

或者您可以使用另一个名为nth-of-type伪 class 选择器。

下面是一个例子

 .style { border: 1px solid olive; width: 100px; }.style tr:nth-of-type(1) { background: red; }.style tr:nth-of-type(2) { background: blue; }.style tr:nth-of-type(3) { background: green; }

 <table class="style"> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </tbody>

这是在nth-child伪 class 选择器上使用另一个参数even或odd的另一种方法。

例子

 .style { border: 1px solid olive; width: 100px; }.style tr:nth-child(odd) { background: black; }.style tr:nth-child(even) { background: white; }

 <table class="style"> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </tbody>

Answer 3

使用 CSS:nth-child Selector 这是供您参考的链接。

示例.style tr:nth-child(1) { background: red; } .style tr:nth-child(1) { background: red; }