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

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

8 голосов
/ 27 мая 2011

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

class="standard_label_style"

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

Follow Up

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

includes.css:

.standard_label_style { color: red; }

test.html: 

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="included.css">
    <style>
      .standard_label_style, label { }
    </style>
  </head>
  <body>
    <label class="standard_label_style">Test Label</label><br/>
    <label>Unclassed Test Label</label>
  </body>
</html>

Ответы [ 7 ]

15 голосов
/ 27 мая 2011

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

Вы можете напрямую применить стиль ко всем меткам: 

label {
    color: Lime;
}

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

.labelClass {
    color: Lime;
}

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

Вы также можете иметь несколько селекторов, поэтому вы можете изменить свой текущий стиль на 

.labelClass, label {
    color: Lime;
}

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

label {
    .labelClass;
}

Хорошая новость заключается в том, что существует множество библиотек на стороне сервера, которые позволяют CSS меньше сосать и позволяют вам делать именно такие вещи, например, dotLess , если вы используете .NET, который предоставляет вложенные правила иБазовая модель наследования.

8 голосов
/ 27 мая 2011

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

label {
/* styles... */
}

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

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

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

4 голосов
/ 27 мая 2011

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

.standard_label_style, label
{
 //styles
}
3 голосов
/ 27 мая 2011

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

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 голосов
/ 27 мая 2011

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

body.standard_label_style label{
   //Your styles here
}
3 голосов
/ 27 мая 2011 
.standard_label_style, label {
    /* stuff */
}
0 голосов
/ 27 мая 2011

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

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

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

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

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

...