如何使用CSS3选择器选择h2

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

首先，丢失内联样式。

那么您不应该在h2上调用nth-of-type。由于每个父级（.span*）中只有一个h2，因此永远不会有第二个。

相反，您在父类上调用它。您实际要查找的是一个nth-of-class伪类，它并不存在。

要在代码中解决此问题，可以使用子字符串匹配属性选择器，因此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的背景

假设你已经提供了代码，这可以用"~"通用兄弟组合子（这是一个css3选择器）来完成

演示

.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。。而不是像Complexity对你网页中的每一个h2所说的那样。

你可以把这一行添加到你的CSS：

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

Answer 5

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;}

<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>