Question

我有两个跨度

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

.class-1有样式

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

现在我需要从font-weight: bold中移除.Text-2，这可以在不创建其他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

Answer 2

假设您的代码大致类似于此

<style>
.class-1 {
  font-weight: bold;
  color: red;
}
</style>
<span class="class-1">Text 1</span>
<span class="class-1">Text 2</span>

如果绝对无法创建类，可以将style属性添加到Text 2的span。改变它看起来像下面。

<span class="class-1" style="font-weight: normal;">Text 2</span>

css中的字体设置

2 个答案: