Member 14848624 Ответов: 1

Атрибут класса - может ли он работать таким образом?

Привет! У меня есть вопрос об атрибуте класса в HTML. Допустим, у меня есть два разных элемента div. Один из них относится к классу "Пример 1".


Теперь я делаю еще один, но на этот раз я не даю ему класс. Затем, если я перейду к своей связанной таблице стилей CSS и сделаю объявление для элементов div без указания класса, будет ли оно применяться и к моему классовому элементу example1 или только к неклассированному элементу?

Что я уже пробовал:

Ничего - гипотетический вопрос

1 Ответов

Рейтинг:
4

Afzaal Ahmad Zeeshan

Нет, приложение стиля и приоритет работают, и это берет на себя то, какие стили применяются. Стили на основе классов применяются к элементу на основе классов и любым стилям div, которые не переопределяются стилями классов. На div, который не содержит класса, применяются только стили div.

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

Пожалуйста, посмотрите это: Специфика - CSS: Каскадные Таблицы Стилей | MDN[^] и html - Каков порядок приоритета для CSS? - переполнение стека[^]

Попробуйте этот пример скрипки, которую я создал, и поиграйте с ней, чтобы узнать, как применяются стили: Edit fiddle - JSFiddle - Code Playground[^]. Код также разделяется здесь для другой цели.

<div class="styled">
Stylized with class content.
</div>
<div> <!--Non styled-->
Non-stylized content.
</div>

В CSS для этого документа:
div {
  background: #cecece;
  font-weight: 600; /* BOLD */
}

.styled {
  background: #fff; /* Note this change! */
	color: red;
}
Вы можете видеть, как применяются различные свойства родительского типа и как они переопределяются специализированными спецификаторами класса или идентификатора (здесь не показаны).