У меня проблема с моим CSS. Когда я применяю любые стили к h2, h3 моего класса jumbotron, он применяется к любым другим h2 и h3. Проверьте мой github-репо ниже для кода. http://usamahameed.github.io/
Это простой для новичков. Быстрое объяснение;
Если вы определяете общий тег;
h1 {color:red;}
<h1>EVERY H1 tag will be RED</h1>
Если вы сделаете его явным с class
или id
(Примечание: id
будет применяться только к одному объекту, class
может использоваться несколько раз для многих объектов), атрибут установлен, чтобы различать стиль только для этого одного объекта, тогда он будет ТОЛЬКО применяться к этому объекту как;
.GreenH1 {color: green;}
#BlueH1 {color: blue;}
<h1 class="GreenH1">This H1 will be green</h1>
<h1 id="BlueH1">This H1 will be blue</h1>
Кроме того, это не значит, что вы должны сделать каждый из них индивидуально явным. Предположим, вы хотите, чтобы все H1 на панели были одного цвета, а все H1 в другом цвете. Затем вы можете указать его у родителя с помощью селектора типа;
.OrangeH1s > h1 {color:orange;}
.PurpleH1s > h1 {color:purple;}
<div class="OrangeH1s">
<h1>One</h1>
<h1>Two</h1>
<h1>Three</h1>
</div>
<div class="PurpleH1s">
<h1>One</h1>
<h1>Two</h1>
<h1>Three</h1>
</div>
Здесь CODEPEN TO PLAY или используйте редактор Stack ниже.
h1 {color:red;}
.GreenH1 {color: green;}
#BlueH1 {color: blue;}
.OrangeH1s > h1 {color:orange;}
.PurpleH1s > h1 {color:purple;}
<h1>EVERY H1 tag will be RED</h1>
<h1 class="GreenH1">This H1 will be green</h1>
<h1 id="BlueH1">This H1 will be blue</h1>
<div class="OrangeH1s">
<h1>One</h1>
<h1>Two</h1>
<h1>Three</h1>
</div>
<div class="PurpleH1s">
<h1>One</h1>
<h1>Two</h1>
<h1>Three</h1>
</div>
Надеюсь, это поможет, ура!
Используйте стиль внутри одного элемента <h2 style="color:red;">tratata</h2>
или <h2 style="color:red;">tratata</h2>
идентификатор элемента и присвойте стиль.