html - css的子样式

Question

我需要一些“衍生”CSS，它是我父级 CSS 的子级。我想将“父”css 的所有属性导入到我的“子”css 中。我找不到解决方案。

例如

.red {
    color: red;
}

.more_red {
    color: red;
    border: 2 px solid red;
}

是否可以做一些与我的伪代码相似的事情？

.red{
    color: red;
}
.more_red <SOME TEXT WHICH SAYS 'THIS CSS IS A CHILD OF .red'>{
    border: 2px solid red;
}

HTML

<p class='more_red'>texty text</p> <- this only I Need 
<p class='red more_red'>texty text</p> <- not this

编辑 我需要创建一个包含所有“父”css 属性的 css。

Answer 1

在 CSS 中，将一个规则中定义的样式继承/导入到另一个规则中的唯一方法是级联。你不能在 CSS 的 LESS 中使用扩展。

为了从其他元素继承属性，父子层次结构是必要的。

您可以使用direct child 选择器>

.red {
    color: red;
}
.red > .more_red {
    border: 2px solid red;
}

或后代选择器

.red .more_red {
    border: 2px solid red;
}

通过这样做，父级的样式被子级继承。

你也可以使用全局选择器*。

例。用于设置整个站点的字体系列

* {
    font-family: Helvetica;
}

您还可以使用 element/type 选择器。

例。设置所有 anchor 的样式

a {
    text-decoration: none;
    color: #ccc;
}
a:hover {
    text-decoration: underline;
}