为何为.tweet类设置font-weight后，内部<span>文本也被加粗？

这是CSS继承特性引发的现象：

• 当你给带.tweet类的<p>标签设置font-weight: 800时，这个字体加粗样式会被该元素下的所有子元素自动继承。
• 你的.twitter-handle类仅定义了color属性，没有指定font-weight，所以<span>元素会沿用从父元素<p class="tweet">继承来的加粗样式，最终让@chp_it也显示为加粗状态。

解决方法 #

如果希望@chp_it不加粗，只需在.twitter-handle类中添加font-weight: normal;来覆盖继承的样式：

.twitter-handle {
  color: rgb(29, 155, 240);
  font-weight: normal; /* 新增此行，取消加粗 */
}

原始代码参考 #

CSS代码：

.tweet {
  width: 600px;
  line-height: 25px;
  font-weight: 800;
  margin-bottom: 20px;
  color: rgb(0, 0, 0);
}

.twitter-handle {
  color: rgb(29, 155, 240);
}

HTML代码：

<p class="tweet">
  As a web developer, you'll want to make your projects easy to use and navigate around.
</p>

<p class="tweet">
  Here <span class="twitter-handle">@chp_it</span> outlines the top skills new developers should have.
</p>

内容的提问来源于stack exchange，提问作者John