Снижение CSS Специфичность с новыми элементами HTML5

Question

раньше применить стили к боковой панели мы должны написать следующее

<div id="sidebar"> 
<p>Some text...</p> 
</div> 

и соответствующий CSS, чтобы установить цвет на красный будет как

#sidebar p{ 
color: Red; 
} 

Специфичность CSS здесь {0,1,0,1}

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

<aside> 
<p>Some text..</p> 
</aside> 

и CSS, чтобы установить цвет на красный будет

aside p{ 
color:Red; 
} 

С помощью элемента HTML5 CSS Специфичность {0,0,0,2}

Использование Элементы HTML5 улучшают семантику. Но Элементы HTML5 уменьшают спецификацию CSS. При условии, что целевые браузеры поддерживают все элементы HTML5, которые из двух подходов были бы подходящими?

Answer 1

При условии, что целевые браузеры поддерживают все элементы HTML5, которые из двух подходов были бы подходящими?

Последний подход с использованием элементов HTML5 будет лучшим подходом, однако есть две вещи, которые необходимо учитывать в отношении правила Специфичность:

1. HTML5 лучше при снижении столкновения, основываясь лишь на имя элемента в одиночку, как там больше их, и при правильном использовании.Рассмотрим:

   <div class="section">words...<div class="aside"><p>an aside</p> 
   

   против

   <section>words...<aside><p>an aside</p> 
   

   Последнее лучше, так как семантика документа находятся в пределах самих тегов.

2. Когда вы повторно используете структуру, ее штраф, чтобы добавить атрибуты id и class, чтобы сделать структуру более четкой.

   <section>words...<aside><p>an aside</p> 
   <section>copyright...<aside><p>year of copyright</p> 
   

   против

   <section class="article">words...<aside><p>an aside</p> 
   <section class="copyright">copyright...<aside><p>year of copyright</p> 
   

   Здесь класс на последней добавляет контекст и уменьшает правила неоднозначности.

Так что в конечном итоге ответ на ваш вопрос использует элементы HTML5 разумно с классами, где это необходимо.

Answer 2

Согласно документу MDN

Специфичность является вес, который применяется к данной CSS декларации на основе подсчета каждого типа селектора. В случае равенства спецификаций последнее объявление, найденное в CSS, применяется к элементу . Специфичность применяется только тогда, когда таргетирован тот же элемент . Правила CSS, которые непосредственно нацелены на элемент, всегда будут иметь преимущество над правилами, которые элемент наследует от предка.

Тогда тег, ниже, чем класс, ниже, чем ид, Также оцениваются внешний CSS-файл ссылка старшинство, и внутренняя/в декларации строки CSS.

Для такого рода информации вы можете обратиться к конкретному браузеру (двигатель)

для Mozilla вы можете обратиться к этому документу https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

В вашем случае у вас есть правило идентификатора CSS (более spcecific) и а tag css rule (minor specific)