Question

我的代码是：

<div id="page" class="clearfix">
  <div class="span12 row">
    <div class="row">
      <div class="span3">
        <h2 style="background: #aaa">Text 1</h2>
      </div>
      <div class="span4">
        <h2 style="background: #bbb">Text 2</h2>
      </div>
      <div class="span3">
        <h2 style="background: #ccc">Text 3</h2>
      </div>
      <div class="span4">
        <h2 style="background: #ddd">Text 4</h2>
      </div>
    </div>
  </div>
</div>

我需要 h2的背景使用css3选择器定义。我试着跟随：

.row .span3 h2:nth-of-type(1) {background: #aaa};
.row .span4 h2:nth-of-type(1) {background: #bbb};
.row .span3 h2:nth-of-type(2) {background: #ccc};
.row .span4 h2:nth-of-type(2) {background: #ddd};

这不起作用。

我可以寻求帮助吗？感谢

Answer 1

首先，丢失内联样式。

然后你不应该拨打nth-of-type上的h2。由于每个父级（h2）中只有一个.span*，因此它永远不会有第二个。{/ p>

相反，您可以在父类上调用它。您实际需要的是nth-of-class伪类，它不存在。

要在代码中解决此问题，您可以使用substring matching attribute selectors，因此，如果调用div的类span1或span99，则无关紧要

您的所有代码都可能如下所示：

HTML

<div id="page" class="clearfix">
    <div class="span12 row">
        <div class="row">
            <div class="span3">
                 <h2>Text 1</h2>
            </div>
            <div class="span4">
                 <h2>Text 2</h2>
            </div>
            <div class="span3">
                 <h2>Text 3</h2>
            </div>
            <div class="span4">
                 <h2>Text 4</h2>
            </div>
        </div>
    </div>
</div>

CSS

.row [class^='span']:nth-of-type(1) h2 {background: #aaa;}
.row [class^='span']:nth-of-type(2) h2 {background: #bbb;}
.row [class^='span']:nth-of-type(3) h2 {background: #ccc;}
.row [class^='span']:nth-of-type(4) h2 {background: #ddd;}

同时检查JSFiddle

Answer 2

我需要使用css3选择器
来定义h2的背景

假设您提供的代码，可以使用'〜General sibling combinator (Which is a css3 selector完成此操作 - 就像这样：

DEMO

.row .span3 h2 {
  background: red;
}
.row .span4 h2 {
  background: blue;
}
.row .span3 ~ .span3 h2 {
  background: orange;
}
.row .span4 ~ .span4 h2 {
  background: yellow;
}

<div id="page" class="clearfix">
  <div class="span12 row">
    <div class="row">
      <div class="span3">
        <h2>Text 1</h2>
      </div>
      <div class="span4">
        <h2>Text 2</h2>
      </div>
      <div class="span3">
        <h2>Text 3</h2>
      </div>
      <div class="span4">
        <h2>Text 4</h2>
      </div>
    </div>
  </div>
</div>

Answer 3

我看到的是你在内联元素中定义背景。

<h2 style="background: #ddd">Text 4</h2>

这确实优先于你的css样式表，因此无效。

Answer 4

Orr ..而不是在网页中为每个单独的h2做复杂性所说的。

您可以将此行添加到CSS中：

h2 {
   background-color: #000000;
   color: #123123; //You can change these properties to whatever you want.
}

Answer 5

＆＃13;

div:nth-of-type(1)>h2 {background: red;}
div:nth-of-type(2)>h2 {background: blue;}
div:nth-of-type(3)>h2 {background: yellow;}
div:nth-of-type(4)>h2 {background: green;}

＆＃13;

<div id="page" class="clearfix">
  <div class="span12 row">
    <div class="row">
      <div class="span3">
        <h2>Text 1</h2>
      </div>
      <div class="span4">
        <h2>Text 2</h2>
      </div>
      <div class="span3">
        <h2>Text 3</h2>
      </div>
      <div class="span4">
        <h2>Text 4</h2>
      </div>
    </div>
  </div>
</div>

＆＃13;

如何使用CSS3选择器选择h2

5 个答案:

DEMO