Question

在CSS中，我想要类似的东西：

:root{  
    underline-all-h1-tags:true  
}  
/* it's not all h1 tags, it's actually h1-tags-with-a-bunch-of-other-things".
But for KISS reasons, we'll assume it's just all of them.*/

/* ... lots and lots of other stuff...*/

h1{  
    if(underline-all-h1-tags == true){ 
        text-decoration: underline  
    } else {
        text-decoration:none  
    }
}

有办法做到这一点吗？我知道我可以做到

:root{h1-underline:underline}  
h1{text-decoration:var(h1-underline)}

但是我试图让我的代码在10年后可以读取 - 当时我已经完全忘记了如何使用CSS。

Answer 1

为什么不利用级联样式表的级联部分？

h1{
    text-decoration:none;
}

.underline h1{
    text-decoration:underline;
}

将“underline”类应用于任何父元素将执行与您上面尝试描述的相同的事情。

您可以使用js添加或删除下划线类，或者在想要受影响的元素上静态设置它。

Answer 2

作为Kai答案的替代方案：

h1 { text-decoration: none; }
.underline { text-decoration: underline; }

.underline是一个实用工具类，可用于为所需的任何元素添加下划线，包括h1。这变得非常可扩展。

当然我个人不会将其命名为.underline;我可能会把它命名为像 .u-td_u（代表“实用程序，文本修饰，下划线”）。命名是您的选择。

只是为了踢，你也可以使用其他实用程序：

.u-td_n { text-decoration: none; }
.u-td_i { text-decoration: inherit; }
.u-td_o { text-decoration: overline; }
.u-td_l { text-decoration: line-through; }
/* etc ... */

像If语句的东西

2 个答案: