Question

我的CSS问题。当我将任何样式应用于我的jumbotron类的h2，h3时，它会应用于其他每个h2和h3。检查我下面的github repo代码。 http://usamahameed.github.io/

Answer 1

这对初学者来说很简单。快速解释;

如果你整体定义一个标签，那么

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中的所有H1都是不同的颜色。然后，您可以使用selector之类的内容在父级中指定它;

.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或使用下面的堆栈编辑器。

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>

希望这有帮助，欢呼！

Answer 2

在一个元素<h2 style="color:red;">tratata</h2>中使用样式或给出元素id和分配风格。

CSS样式应用于每个元素

2 个答案: