Стили CSS, применяемые к каждому элементу

-3

У меня проблема с моим CSS. Когда я применяю любые стили к h2, h3 моего класса jumbotron, он применяется к любым другим h2 и h3. Проверьте мой github-репо ниже для кода. http://usamahameed.github.io/

2 ответа

2
Лучший ответ

Это простой для новичков. Быстрое объяснение;

Если вы определяете общий тег;

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>

Надеюсь, это поможет, ура!

0

Используйте стиль внутри одного элемента <h2 style="color:red;">tratata</h2> или <h2 style="color:red;">tratata</h2> идентификатор элемента и присвойте стиль.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню