ДИВ структура идентификатора именования и ссылка на класс CSS

Question

Я сожалею, потому что это основной вопрос, я новичок в CSS еще мне нужно, чтобы получить что-то сделано быстро, так что я надеялся на эспрессо-ответ ...

В моем документе у меня есть divs, которые я хочу назвать, используя структуру именования [category]. [SpecificID], и все они должны подчиняться определению CSS категории. Например.

<div id="sectionTitle.experience">Experience</div> 
... 

<div id="sectionTitle.education">education</div> 

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

Как я могу это сделать?

Answer 1

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

Кроме того, я думаю, что у вас не может быть . в вашем ID-имени, но я мог ошибаться.

Что вы хотите:

<div id="experience" class="sectionTitle">Experience</div> 

Answer 2

Вы можете использовать идентификаторы и классы. Например:

<div id="sectionTitle_experience" class="sectionTitle">Experience</div> 

Обратите внимание, что я заменил . с _, чтобы сделать его доступным в CSS - в противном случае вам придется прибегнуть к чему-то вроде [id='sectionTitle.experience'] вместо #sectionTitle_experience.

EDIT: Это, как говорится, если вы хотите быстро и грязный исправить, попробуйте этот CSS:

[id^='sectionTitle.'] { /* styles here */ } 

Answer 3

Создать CSS класс .sectionTitle и иметь желаемые стили в него. Передайте этот класс каждому div, который будет иметь ваш текст заголовка. Таким образом, вы можете иметь одинаковые стили для заголовка с разными идентификаторами.