有没有办法缩短css选择器？ [英] Is there a way to shorten css selectors?

问题描述

我有：

#signUpForm h1, #signUpForm p{
    color: #fff;
}

有办法缩短此时间，例如：

Is there a way to shorten this such as:

#signUpForm h1, p{
    color: #fff;
}

或者每次我需要创建一个新的逗号分隔的选择器，我的第一个例子？

Or do I need to create a new comma separated selector each time, as in my first example?

推荐答案

这取决于你指定的属性和要定位的元素，如果它的jut约 color 那么你可以写

It depends on the properties you are specifying and the elements you want to target, if its jut about color then you can write

#signUpForm {
    color: #fff;
}

因为 color 属性将被 h1 以及 p 继承，但是想到一个您想要应用 font-weight 所以这里你不能使用上面的选择器 font-weight 不会被 / code>标签。

Because color property will be inherited by h1 as well as p but think of a scenario where you want to apply font-weight so here you cannot use the above selector as font-weight won't be inherited by h1 tag.

如果需要，您可以使用CSS预处理器，如LESS或SASS，您可以像

If you want, you can use CSS pre processors like LESS or SASS where you can write like

#signUpForm {
    h1, p {
       font-weight: 100;
    }
}

但是，正如我所说，因为有些是由子元素继承的，有些不是，所以即使你使用 color 如

But again, as I said, it depends on the properties you are writing, because some are inherited by the child elements and some are not, so even if you use color like

#signUpForm {
    h1, p {
       color: #fff;
    }
}

没有意义，因为它等效于 #signUpForm {color：#fff; } 除非您为 h1 或指定了不同的颜色 > p

Makes no sense because that is equivalent to #signUpForm { color: #fff; } unless you've specified a different color for h1 or p

这篇关于有没有办法缩短css选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！