Детский стиль css

Question

Мне нужен некоторый «производный» css, который является дочерним элементом моего родительского css. Я хочу импортировать все атрибуты 'parent' css в мой 'child' css. Я не могу найти решение.

E.g.

.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 

EDIT Мне нужно создать CSS, который состоит из всех свойств CSS 'родительских'.

Answer 1

Только способ наследования/импорта стилей, определенных в одном правиле, другому в CSS, является каскадным. Вы не можете использовать расширение, как в LESS в CSS.

Для наследования свойств другого элемента необходима иерархия parent-child.

Вы можете использовать direct child селектор >

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

или селектор потомков

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

Делая это, стили родителей наследуются детьми.

Вы также можете использовать глобальный селектор *.

Ex. Для установки семейства шрифтов по всему сайту

* { 
    font-family: Helvetica; 
} 

Вы также можете использовать element/type селектор.

Ex. Чтобы задать стиль всех якорей

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