Html CSS样式包括当前元素和子元素

有没有一种方法可以同时为当前元素和子元素设置CSS样式

这会对当前元素执行此操作

.test
{
   color: red;
   height: 100%;
   border-radius: 12px;
}

这对于class.test的子代元素也可以

.test *
{
   color: red;
   height: 100%;
   border-radius: 12px;
}

---

如何选择当前子元素和子元素？

因为没有关于具体项目结构的更多信息

只需停留在代码中，您就可以做到：

.test,
.test *
{
   color: red;
   height: 100%;
   border-radius: 12px;
}

.test,
.test > *
{  
   ... your code 
}

// or better more specific
// use the tag-name of the direct childs
// in this case I take 'div' as example

.test,
.test > div {
   ... your code
}

注意：使用

*

可能根本不是最佳实践，因为它会为每个元素设置样式（在这种情况下，所有子元素甚至都是

.test

下面的第二级、第三级…级别）。要避免这种情况，您可以执行以下操作：

.test,
.test *
{
   color: red;
   height: 100%;
   border-radius: 12px;
}

.test,
.test > *
{  
   ... your code 
}

// or better more specific
// use the tag-name of the direct childs
// in this case I take 'div' as example

.test,
.test > div {
   ... your code
}