缩短重复元素和伪类组合的冗长CSS

2022-02-21 00:00:00 css-selectors html-table css

我正在向表的相同几个部分添加不同的伪类和元素。有没有办法通过以某种方式总结来节省工作和精力?我不确定该怎么做。

.tr1 th:nth-child(1) {background-color: green;}
.tr1 th:nth-child(5) {background-color: green;}
.tr2 td:nth-child(2) {background-color: green;}
.tr2 td:nth-child(4) {background-color: green;}
.tr3 td:nth-child(3) {background-color: green;}
.tr4 td:nth-child(4) {background-color: green;}
.tr4 td:nth-child(2) {background-color: green;}

.tr1 th:nth-child(1):hover {background-color: hotpink;}
.tr1 th:nth-child(5):hover {background-color: hotpink;}
.tr2 td:nth-child(2):hover {background-color: hotpink;}
.tr2 td:nth-child(4):hover {background-color: hotpink;}
.tr3 td:nth-child(3):hover {background-color: hotpink;}
.tr4 td:nth-child(4):hover {background-color: hotpink;}
.tr4 td:nth-child(2):hover {background-color: hotpink;}

.tr1 th:nth-child(1)::selection {color: hotpink;}
.tr1 th:nth-child(5)::selection {color: hotpink;}
.tr2 td:nth-child(2)::selection {color: hotpink;}
.tr2 td:nth-child(4)::selection {color: hotpink;}
.tr3 td:nth-child(3)::selection {color: hotpink;}
.tr4 td:nth-child(4)::selection {color: hotpink;}
.tr4 td:nth-child(2)::selection {color: hotpink;}

解决方案

可以使用:is()和逗号,组合选择器

.tr1 th:is(:nth-child(1),:nth-child(5)),
:is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4)),
.tr3 td:nth-child(3) {background-color:green}

.tr1 th:is(:nth-child(1),:nth-child(5)):hover,
:is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4)):hover,
.tr3 td:nth-child(3):hover {background-color:hotpink}

.tr1 th:is(:nth-child(1),:nth-child(5))::selection,
:is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4))::selection,
.tr3 td:nth-child(3)::selection {color:hotpink}

相关文章