英文:
if i add font-weight to a paragraph, the text inside <span> changes to. what is the reason? added the code
问题
<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-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);
}
<!-- 语言: lang-html -->
<p class="tweet">
作为网页开发者，您希望使您的项目易于使用和导航。
</p>
<p class="tweet">
在这里 <span class="twitter-handle">@chp_it</span> 概述了新开发者应具备的顶级技能。
</p>
<!-- 结束代码段 -->
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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);
}
<!-- language: lang-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>
<!-- end snippet -->
tried to bold the tweet text, instead the code gets applied for the <span> @chp_it tag too.
答案1
得分: 2
因为您在<p>元素中为所有内容设置了样式，而<span>位于<p>元素中。
如果您想为<span>设置特定样式，您可以像为<p>元素一样为它添加样式规则。例如，要重置font-weight：
.tweet {
width: 600px;
line-height: 25px;
font-weight: 800;
margin-bottom: 20px;
color: rgb(0, 0, 0);
}
.twitter-handle {
color: rgb(29, 155, 240);
font-weight: normal;
}
<p class="tweet">
作为一名网页开发者，您希望使您的项目易于使用和导航。
</p>
<p class="tweet">
在这里，<span class="twitter-handle">@chp_it</span> 概述了新开发者应具备的顶级技能。
</p>
英文:
Because you're styling everything in the <p> element, and the <span> is in the <p> element.
If you want a specific style for the <span>, you can give it style rules just like you do for the <p> element. For example, to reset the font-weight:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-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);
font-weight: normal;
}
<!-- language: lang-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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论