css - css中的字体设置

Question

我有两个跨度

 <span class="class-1">Text1</span>
 <span class="class-1">Text2</span>

.class-1 有样式

.class-1 {
  font-weight: bold;
  color: red;
}

现在我需要从 .Text-2 中删除 font-weight: bold，这是否可以在不创建另一个 css 类的情况下完成？

Answer 1

Fiddle

 <span class="class-1">Text1</span>
 <span class="class-1">Text2</span>

class-1 有样式

.class-1 {
      font-weight: bold;
      color: red;
    }


.class-1 + .class-1{/*this will be applied on the secound span*/
      font-weight: normal;
      color:green;
    }

这个选择:

.class-1 {
      font-weight: bold;
      color: red;
    }


.class-1:last-child{/*this will be applied on the secound span*/
      font-weight: normal;
      color:green;
    }
/*or this*/
.class-1:nth-child(2){
      font-weight: normal;
      color:green;
    }

内联 CSS

<span class="class-1" style="font-weight: bold;color: red;">Text1</span>
<span class="class-1" style="font-weight: normal;color:green;">Text2</span>

Fiddle

如果你介于两者之间

HTML:

<span class="class-1">Text1</span>
<p>Hello do you have time to talk about  Css?</p>
<span class="class-1">Text2</span>

CSS:

.class-1 {
      font-weight: bold;
      color: red;
    }

.class-1:nth-of-type(2) { 
    font-weight: normal;
    color: green; 
}

Fiddle