CSS: Как назначить один класс нескольким элементам?

Я хочу присвоить один класс, например, «центрированный» для некоторых, всех или каждого из моих текстовых элементов, например <h1 class="centered">, <h2 class="centered">, <h3 class="centered">, <p class="centered">.CSS: Как назначить один класс нескольким элементам?

Мне нужно настроить только определенные элементы, потому что мне может понадобиться несколько разных правил для таких элементов блока, как <div class="centered">.

Если вы считаете, что этот вопрос легко получить, попробуйте использовать его в Google. Независимо от того, как я формулирую этот вопрос, Google думает, что я прошу «как назначить несколько классов одному элементу». Я знаю, как дать элемент несколько классов, поэтому нет, это не то, что я хочу.

Что я пробовал:

h1, h2, h3, p .centered{ 
    text-align:center; 
}

Это не может быть правильным. Это просто говорит, что центрированный класс разделяет те же правила css с h1, h2 и h3.

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

h1.centered{ 
    text-align:center; 
} 
h2.centered{ 
    text-align:center; 
} 
h3.centered{ 
    text-align:center; 
}

... и т.д..

источник

2016-03-17 TARKUS

Если вы хотите иметь различные правила для определенного набора элементов, это, вероятно, будет проще создать отдельный класс для этого. Или создайте одно правило с общим CSS с CSS, а затем создайте отдельные правила, изменяющие общий CSS только для элементов, которые вы хотите отличать. Кстати, все элементы, о которых вы упомянули, являются блочными элементами. – BurningLights

@BurningLights Я не упоминал об этом, но в итоге я создал отдельный класс для своего div. Классы «h» и «p» являются блочными элементами? Я думал, они были встроенными? – TARKUS

См. Полный список элементов блока по адресу: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements. Элементы «h» и «p» находятся там. :) – BurningLights

Вы просто определить свой класс в CSS и использовать его на элементы, которые вы хотите в HTML

.centered { 
 
    text-align:center; 
 
}

<h1 class="centered">Lorem ipsum.</h1> 
 
<h2 class="centered">Lorem ipsum.</h2> 
 
<h3 class="centered">Lorem ipsum.</h3> 
 
<p class="centered">Lorem ipsum.</p>

источник

2016-03-17 20:20:02

Я уже знаю это. Возможно, мне придется передумать мой вопрос. Я думаю, что я слишком усложнил проблему, спасибо. Как отметил @BurningLights, я должен просто создать отдельный класс для div и просто дать ему другое имя. – TARKUS

Вы можете использовать ': not()' https://jsfiddle.net/Lg0wyt9u/203/, или вы также можете сделать это https://jsfiddle.net/Lg0wyt9u/204/ или https://jsfiddle.net/ Lg0wyt9u/206/ –

Эй, это интересно. Узнав что-то новое все время, спасибо. – TARKUS

Еще один небольшой совет: вы можете объединить все ваши " если вы хотите. Таким образом, вместо

h1.centered{ 
    text-align:center; 
} 
h2.centered{ 
    text-align:center; 
} 
h3.centered{ 
    text-align:center; 
}

ли что-то вроде этого:

h1.centered, h2.centered, h3.centered{ 
    text-align: center; 
}

источник

2016-03-17 20:51:01

CSS: Как назначить один класс нескольким элементам?

ответ

Смежные вопросы