时间戳

首页 > 解决方案 > 当前元素和子元素的 CSS 样式

html - 当前元素和子元素的 CSS 样式

问题描述

有没有办法同时设置当前元素和子元素的 CSS 样式？

这适用于当前元素。

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

这将适用于类 .test 的后代子元素。

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

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

标签： htmlcsssass

解决方案

由于没有关于您的具体项目结构的更多信息......

只需留在您的代码中，您就可以执行以下操作：

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

注意： using*可能根本不是最佳实践，因为它设置了每个元素的样式（在这种情况下，所有子元素甚至是第二、第三...级别以下.test）。为避免这种情况，您可以这样做：

.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
}

推荐阅读