儿童风格的CSS

Question

我需要一些'衍生'的CSS,这是我的父css的孩子.我想将'parent'css的所有属性导入到我的'child'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中使用extend作为LESS.

要从其他元素继承属性,父子层次结构是必需的.

你可以使用direct child选择器>

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

或后代选择器

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

通过这样做,父级的样式由子级继承.

您还可以使用全局选择器*.

防爆.用于在整个站点中设置font-family

* {
    font-family: Helvetica;
}

您也可以使用element/type选择器.

防爆.设置所有锚点的样式

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