Присоединение файла CSS к элементу и дочерним элементам

В настоящее время я создаю библиотеку для некоторых стилей CSS (некоторые из них также определены jQuery, поэтому не стесняйтесь использовать JavaScript/jQuery для решения - я не думаю, что это возможно с обычным CSS в любом случае).

У меня есть некоторые части, которые должны применяться только в том случае, если существует родительский элемент с определенным классом (в примере.style-container).

Конечно, это возможно, добавив класс перед каждым селектором CSS.

Это требует больше данных, которые необходимо перенести, поэтому я подумал, что, возможно, есть возможность применить CSS-файл и его содержимое только к определенному элементу и его дочерним элементам вместо всего документа.

Представьте себе этот CSS (значительно упрощенный):

h1 {
   color: #f00;
   border-bottom: 1px solid #000;
}

Этот HTML-документ (часть внутри тела):

<div class="style-container">
   <h1>This should be styled</h1>
</div>
<div>
   <h1>This should be standard style</h1>
</div>

А теперь, возможно, есть некоторый JavaScript/jQuery для загрузки файла только для всех элементов класса и его детей.

Замечания:

В JavaScript/jQuery могут появиться новые элементы, которых раньше не было, и я не очень хочу снова загружать весь стиль, потому что тогда может потребоваться много ресурсов для загрузки, если содержимое меняется очень быстро.

И ожидание тоже не вариант, потому что тогда элемент не будет стилизован для ожидаемого времени.

РЕДАКТИРОВАТЬ: еще раз указать: я ищу лучший вариант, что стандартный селектор детей CSS, который будет работать следующим образом:

.style-container h1 {
   color: #f00;
   border-bottom: 1px solid #000;
}

Я хочу этого, потому что он использует намного больше данных для передачи с сервера на клиент. Чтобы понять это: у меня есть часть моего кода в минимизированном виде с селектором и без. Тому, у которого есть селектор, нужно 3698 символов, а версии без селектора - 2538 символов. Это разница в 1160 символов. Или в кБ у нас разница составляет 3,61 кБ - 2,47 кБ = 1,14 кБ. Это кажется очень маленьким, но это всего лишь небольшая часть кода. Я ожидаю, что код будет в десять раз больше. Это имеет значение 11,4 КБ. На мой взгляд, это довольно большое количество для мобильных устройств...

Источник

3 ответа

Решение

Оттуда, где я вижу, вы ищете "ограниченный CSS", который определен в MDN, но, к сожалению, для вас доступен только в Firefox

Тем не менее, базовое решение CSS в любом случае является более производительным. Если вам нужно добавить скрипт, этот скрипт также будет иметь некоторый вес (даже если он не такой большой) и будет занимать процессорное время, что также может иметь значение для мобильных устройств. Вы бы заново изобрели колесо, даже не сделав его идеальным кругом...

Источник

В вашем случае вместо использования скрипта для загрузки стиля каждый раз для стилизации элемента, лучше использовать только с CSS. Потому что селектор css будет загружаться мгновенно, когда бы он ни видел селектор в DOM. Css:

div.style-container> h1{
   color: #f00;
   border-bottom: 1px solid #000;
}

> указано сразу h1 после класса .style-container.и только дети к нему, а не все дети к детям.

div.style-container h1 {
    color: #f00;
    border-bottom: 1px solid #000;
}

Space будет читать все элементы h1 в классе .style-container.ie будет рассматривать детей вместе с детьми для детей.

Источник

Это основной CSS.

Чтобы стилизовать H1, который является дочерним элементом (дочерним элементом первого уровня) элемента (пример использует div, но div можно заменить на.style-container или любой класс / ID):

div > h1 {
    color: #f00;
    border-bottom: 1px solid #000;
}

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

div h1 {
    color: #f00;
    border-bottom: 1px solid #000; 
}

Последний будет применяться ко всем h1 внутри div.

Источник
Другие вопросы по тегам