5

我正在尝试查找特定问题的 CSS 语法。我真的搜索但找不到答案。这是问题所在。我的 HTML 标记如下：

<div>
 <header>
  <div class="container">
   <div class="row">
   my content that I want red
   </div>
  </div>
 </header>
 <div class="container">
  <div class="row">
  my content that I want blue
  </div>
 </div>
</header>

我想用红色显示“我想要红色的内容”，用蓝色显示“我想要蓝色的内容”，我只能使用 CSS。

有谁知道会成功的诀窍？不幸的是，子类不能在这里工作。

提前致谢，

4

4 回答 4

3

你可能没有很努力地搜索。W3C 已经定义了十几个选择器。

在这里，您将使用

header > div.container {
    color: red;
}

div > div.container {
    color:blue;
}

尖括号 ( >) 是第一个子选择器。由于第二个container不是元素的第一个子header元素，因此它不会有红色文本。同样，由于带有红色文本的 是 a而不是 acontainer的第一个子元素，因此只有它才会有红色文本。headerdiv

于 2013-07-25T17:21:48.697 回答
3

有很多选择。这一切都取决于你的情况。这是一对没有修改 HTML 的：

使用父元素

.row { color: blue }
header .row { color: red }

使用:nth-of-type

.column:nth-of-type(1) .row { color: red }
.column:nth-of-type(2) .row { color: blue }

如果你愿意添加额外的标记，你总是可以添加额外的类。

于 2013-07-25T17:21:02.707 回答
0

您可以使用 CSS nth-of-type

:nth-of-type

小提琴：http : //jsfiddle.net/wn2BL/

于 2013-07-25T17:23:11.537 回答
0

如果顺序保持不变，您可以选择第一个 div 为红色，第二个为蓝色。

您可能需要一个父容器。标题标签是否应该成为两个容器 div 的父级？

于 2013-07-25T17:19:06.580 回答