Question

基本上，我给了<body>一种颜色（blue），我想让身体中的一个标题（<h3>）变成另一种颜色（{{1} }}）不使用green。我正在尝试将所有id标题设为某种颜色。

当我在浏览器中打开代码时，我得到以下内容：

＆＃13;

<h3>

＆＃13;

body {
  color: blue;
  font-family: sans-serif;
}
h3 {
  font-style: italic;
  color: green;
  font-family: serif;
}
#id1 {
  color: blue;
}
span {
  color: orange;
}
.id4 {
  font-family: serif;
}

＆＃13;

Answer 1

h3
{
    font-style: italic;
    color: green !important;
    font-family: serif;
}

DEMO：http://pastebin.com/Rd8HGYKV

编辑：该问题要求id中的h3属性不能用于样式设置。因此，必须覆盖id样式才能应用绿色。在这种情况下，!important是一种有效的工具。

Answer 2

很快：

h3:nth-child(1) { color:green; }

详细说明：

codepen demo link

您可以使用CSS3中新增的 nth-child 属性。它按编号选择元素。它从数字1开始，数字按兄弟姐妹的顺序定义，但有点令人困惑。但是，只有以下一个示例，您可以轻松使用它。我会告诉你的。

<!DOCTYPE html>
<html>
<body>
    <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
        <div></div>
        <li>list 4</li>
    </ul>
</body>
</html>

在这里，您可以在每个<li>元素中应用您的样式。但请仔细查看第4 <li>页。

ul li:nth-child(1) { color:red; }
ul li:nth-child(2) { color:blue; }
ul li:nth-child(3) { color:green; }
/* 4th <li> is not nth-child(4), but nth-child(5) because of <div> element. */
ul li:nth-child(5) { color:pink; }

我不知道原因，但nth-child方法统计其他兄弟。然后，在您的情况下，您可以这样使用。

h3:nth-child(1) { color:green; }

我确定你会毫不费力地使用它。和HTML5一起度过美好的一天〜！

如果正文已有颜色，您如何更改段落/标题颜色？

2 个答案: