CSS: импорт/копировать стиль из другого селектора

Question

скажем, у меня есть некоторый код, генерируемый библиотекой на стороне сервера третьей партии (я не могу изменить эту разметку, потому что это третья сторона генерироваться):

<div class="ICannotChangeThatClass">Awesome markup</div> 

И скажем, я хотите применить на ней некоторые CSS от другой 3 участника, без изменения выбора (потому что третья сторона CSS):

.MyAwesomeClass { 
    /* Some awesome CSS stuff */ 
} 

Могу ли я применить MyAwesomeClass к ICannotChangeThatClass с чистого CSS? я не знаю, как это может быть, но что-то вроде:

.ICannotChangeThatClass { 
    use .MyAwesomeClass /* this is invalid CSS */ 
    /* or maybe */ 
    extend .MyAwesomeClass /* this is invalid CSS */ 
} 

Спасибо!

Answer 1

Там нет никакого способа сделать это в чистом CSS, только с помощью CSS предварительных процессоров, таких как дерзость/меньше и т.д.

Есть 2 способа вы можете пойти об этом:

1. Если вы можете управлять сгенерированным html, добавьте свой класс к элементу: <div class="ICannotChangeThatClass MyAwesomeClass ">Awesome markup</div>

2. В вашем css определите класс с тем же именем, который вы хотите переопределить, и добавьте новый стиль:

   .ICannotChangeThatClass { 
       //MyAwsomeClass code goes here 
   } 
   

Answer 2

Если вы примените два класса к элементу типа class="firstclass secondclass", то эти два класса применяются в том порядке, который вы даете (наряду с обычными правилами на specificity).

В противном случае вы можете изучить препроцессор, например Sass или LESS, что позволит вам «расширить» один класс CSS в другом, среди огромного количества других полезных функций.

Я настоятельно рекомендую получить доступ к предварительному процессору - они могут сделать CSS намного легче писать, особенно в крупных проектах.

Answer 3

Если вы добавите css в класс, он будет объединен в один в конце. Он не будет перезаписываться, если вы не добавите уже существующий атрибут.

.ICannotChangeThatClass { 
    /* Some awesome CSS stuff */ 
}