表格css 对class="tr1"行内的td使用 :nth-child() 伪类的示例
时间: 2024-03-23 11:36:14 浏览: 79
使用css属性:nth-child(n)匹配选择第n个子元素
可以使用以下示例代码:
```css
/* 选择第1个子元素 */
tr.tr1 td:nth-child(1) {
background-color: pink;
}
/* 选择第2个子元素 */
tr.tr1 td:nth-child(2) {
background-color: lightblue;
}
/* 选择第3个子元素 */
tr.tr1 td:nth-child(3) {
background-color: lightgreen;
}
```
这段代码会选择 class 为 "tr1" 的所有行内的 td 元素,并根据其在父元素中的位置分别设置不同的背景色。第一个 td 元素的背景色为粉色,第二个 td 元素的背景色为浅蓝色,第三个 td 元素的背景色为浅绿色。
阅读全文