Question

我有：

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

有没有办法缩短这一点，如：

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

或者我是否每次都需要创建一个新的逗号分隔选择器，如我的第一个示例所示？

Answer 1

你有没有想过使用Sass，你可以做类似

的事情

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

Answer 2

这取决于您指定的属性和您要定位的元素，如果它的内容是color，那么您可以编写

#signUpForm {
    color: #fff;
}

由于color属性将由h1以及p继承，但请考虑您要应用font-weight的方案，因此您无法使用上述选择器由于font-weight代码不会继承h1。

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

那样编写

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

但是，正如我所说，这取决于您正在编写的属性，因为有些属性是由子元素继承而有些则不是，所以即使您使用color之类的

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

没有任何意义，因为这相当于#signUpForm { color: #fff; }，除非您为color或h1

指定了不同的p

Answer 3

使用:any。

#signUpForm :any(h1,p) { }

浏览器支持各不相同。您可能需要执行-webkit-any等。