Я хочу применить существующий стиль CSS ко всем меткам на странице. Как?

Примечание, это отличается от старого вопроса как я могу применить CSS на всех кнопках, которые присутствуют на этой странице? потому что это уже существующий стиль. Поэтому, учитывая, что стиль, который мы будем называть "standard_label_style", уже существует в включенном файле CSS, что я могу сделать, чтобы сказать, что все метки на этой странице должны иметь этот стиль, кроме добавления:

class="standard_label_style"

каждому и каждому? И да, я знаю, что могу применить стили ex-post-facto с помощью фрагмент кода jQuery или JavaScript. Я просто пытаюсь узнать, как я должен это делать с CSS.

Последующие

я получил несколько комментариев, в которых говорится, что просто используйте такой синтаксис .standard_label_style, label... К сожалению, это совсем не то, чего я хочу. Это позволит мне применить дополнительные правила к классу standard_label_style, а также правила к меткам на этой странице, но не позволит мне применить этот стиль ко всем меткам на эта страница. Чтобы увидеть пример этого, Вот таблица стилей и html для демонстрации. Метка без класса по-прежнему не будет отображаться красным цветом, но это то, что я надеюсь, произойдет. Я хочу применить существующий класс ко всем этим меткам на странице, а не только к классу и без добавления нового стиля на этой странице, существующий стиль должен быть единственным стилем.

включено.css:

.standard_label_style { color: red; }
8
css html stylesheet

7 ответов

CSS на самом деле не работает так.

вы можете применить стиль ко всем этикетки прямо:

label {
    color: Lime;
}

или применить класс ко всем меткам

.labelClass {
    color: Lime;
}

<label class="labelClass"></label>

вы также можете иметь несколько селекторов, так что вы можете ammend ваш текущий стиль, чтобы быть

.labelClass, label {
    color: Lime;
}

то, что вы не можете сделать в стандартном CSS, это что-то вроде

label {
    .labelClass;
}

хорошей новостью является то, что есть куча библиотек на стороне сервера, которые делают CSS сосать меньше и позволяют вам делать именно такого рода вещи, см., например,без точки если вы используете .Сеть, которая содержит вложенные правила и базовую модель inheratance.

12

чтобы применить стиль к каждой метке на странице, используйте этот CSS:

label {
/* styles... */
}

Если у вас уже есть существующий стиль (например, "standard_label_style") в CSS, вы можете применить это к каждой метке:

.standard_label_style, label {
/* styles... */
}

это повлияет на каждую метку через сайт, поэтому используйте с осторожностью!

8

в вашем css-файле вы не можете просто поместить

.standard_label_style, label
{
 //styles
}
4
.standard_label_style, label {
    /* stuff */
}
3

Я не уверен, что вы можете... один из возможных обходных путей (кажется немного хакерским) - прикрепить стиль к тегу тела, а затем изменить css следующим образом:

body.standard_label_style label{
   //Your styles here
}
3

один из самых недоиспользуемых трюков CSS всех времен:дайте своим телам id или класс!

HTML:

<body id="standard_label_style">
    <label>Hey!</label>
</body>

CSS:

#standard_label_style label{
    the styles
}

будет брать стили, в то время как

HTML:

 <body id="custom_label_style">
     <label>Custom!</label>
 </body>

не будет.

3

Вы имеете дело здесь с приоритетом CSS. Объявления, которые являются " более расплывчатыми "(тег тела, классы), применяются перед объявлениями, которые являются" менее расплывчатыми " (конкретные элементы, встроенный CSS).

таким образом, ваш ответ зависит от того как таблица стилей определяет label стили. Если, например, он говорит label {...}, то это довольно специфично, и лучше всего использовать более конкретный стиль CSS, см.:

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

существует также шанс, что если вы сами определите label {your custom css} это должно работать, если вы импортируете свой файл стилей позже. Это то, что я бы попытался сначала посмотреть, работает ли это. Вы пробовали это? Каков был результат?

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

0