Question

我正在尝试找到特定问题的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。

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

提前致谢，

Answer 1

有很多选择。这一切都取决于你的情况。这是一对没有修改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 }

如果您愿意添加其他标记，则可以随时添加其他类。

Answer 2

你可能没有非常努力地搜索。 The W3C has defined over a dozen selectors

在这里，您将使用

header > div.container {
    color: red;
}

div > div.container {
    color:blue;
}

尖括号（>）是第一个子选择器。由于第二个container不是header元素的第一个子元素，因此它不会有红色文本。同样，由于带有红色文字的container是header的第一个孩子，而不是div，因此只有它会有红色文字。

Answer 3

如果订单保持不变，您可以选择第一个div为红色，2nd为蓝色，

您可能需要父容器。头标记是否应该为父容器div提供父项？

Answer 4

您可以使用CSS nth-of-type

:nth-of-type

FIDDLE：http://jsfiddle.net/wn2BL/

仅在特定元素内引用CSS类

4 个答案: