缩短重复元素和伪类组合的冗长CSS-前端问题

Shorten verbose CSS that repeats combinations of elements and pseudo-classes(缩短重复元素和伪类组合的冗长CSS)

本文介绍了缩短重复元素和伪类组合的冗长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}

这篇关于缩短重复元素和伪类组合的冗长CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！