Html 更改 DIV (CSS) 中字体的颜色
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12999649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Color of Fonts in DIV (CSS)
提问by Mike
I am trying to change the color and size of H2 font and H2 link fonts based on the div they are in but have not been successful. What am I doing wrong?
我正在尝试根据它们所在的 div 更改 H2 字体和 H2 链接字体的颜色和大小,但没有成功。我究竟做错了什么?
<style>
h2 {
color:fff;
font-size: 20px;
}
social.h2 {
color:pink;
font-size: 14px;
}
social.h2.h2color {
color:purple;
font-size: 10px;
}
tv.h2 {
color:green;
font-size: 14px;
}
tv.h2.h2color {
color:orange;
font-size: 10px;
}
</style>
<h2>List of Companies </h2>
<div class="social">
<h2> <A href="http://www.facebook.com">Facebook </a>
<span class="h2color">Found in 2004 </span> </h2>
blah blah blah
<h2> <A href="http://www.twitter.com">Twitter </a>
<span class="h2color">Found in 2007 </span> </h2>
blah blah blah
</div>
<div class="tv">
<h2> <A href="http://www.fox.com">Fox </a>
<span class="h2color">Found in 2004 </span> </h2>
blah blah blah
<h2> <A href="http://www.nbc.com">NBC </a>
<span class="h2color">Found in 2007 </span> </h2>
blah blah blah
</div>
I am trying to make it look like this:
我试图让它看起来像这样:
采纳答案by Blackcoat
Your first CSS selector—social.h2
—is looking for the "social" element in the "h2", class, e.g.:
您的第一个 CSS 选择器social.h2
——正在寻找“h2”类中的“social”元素,例如:
<social class="h2">
Class selectors are proceeded with a dot (.
). Also, use a space () to indicate that one element is inside of another. To find an
<h2>
descendant of an element in the social
class, try something like:
类选择器以点 ( .
)开头。此外,使用空格 ( ) 表示一个元素在另一个元素内部。要
<h2>
在social
类中查找元素的后代,请尝试以下操作:
.social h2 {
color: pink;
font-size: 14px;
}
To get a better understanding of CSS selectors and how they are used to reference your HTML, I suggest going through the interactive HTML and CSS tutorials from CodeAcademy. I hope that this helps point you in the right direction.
为了更好地理解 CSS 选择器以及它们如何用于引用您的 HTML,我建议您阅读 CodeAcademy的交互式 HTML 和 CSS 教程。我希望这有助于为您指明正确的方向。
回答by Wilson Biggs
To do links, you can do
要做链接,你可以做
.social h2 a:link {
color: pink;
font-size: 14px;
}
You can change the hover, visited, and active link styling too. Just replace "link" with what you want to style. You can learn more at the w3schools page CSS Links.
您也可以更改悬停、访问和活动链接样式。只需将“链接”替换为您想要的样式即可。您可以在 w3schools 页面CSS 链接 中了解更多信息。