Question

我正在尝试选择第一个标题（h2）和第一个标题。 我可以选择标题，但由于标题嵌套在单独的div元素中，因此我得到了所有标题（这非常有意义）。

我尝试过选择：

CSS

div.row:first-child h2:first-of-type {
// do stuff //
}

但这并不好，因为有很多div有一类“行”。

目前我有这个：

CSS

div.row h2:first-of-type {
    background-color: red;
}

选择我的两个标题（我理解为什么）。但是，我只有一个是第一个。

感谢您的时间！

jsFiddle example

Answer 1

鉴于您的HTML，为什么不这样做：

.row .row:first-of-type h2 {
    background-color: red;
}

Demo fiddle

这将选择父包装.row中的第一个.row，其中HTML将包含第一个h2。如果它包含多个.row .row:first-of-type h2:first-of-type

，只需将其更改为h2即可

Answer 2

SW4的答案在这种情况下运行正常，但是如果你改变HTML，它（可能）会失败。

你可以在h2上添加一个类吗？这可能是解决这个问题的最简单方法。

E.g：

一些标题一些标题

这样很容易：

使用.heading类
使用.heading--main类对主标题进行不同的样式设置，同时保留.heading类中的所有样式。

Answer 3

尝试下面的css，我使用了一个虚拟类.first你也可以使用id ...

  <div class="row">
            <div class="col-xs-12">
                <div class="row">
                    <div class="col-xs-12 col-md-4 text-center">
                        <!-- image goes here -->
                    </div>
                    <div class="col-xs-12 col-md-8 first">
                         <h2>My Headline</h2>

                        <p>My Text.</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-md-4 text-center">
                        <!-- image goes here -->
                    </div>
                    <div class="col-xs-12 col-md-8">
                         <h2>My Headline</h2>

                        <p>My Text.</p>
                    </div>
                </div>
            </div>
        </div>

css

div.row .first h2:first-of-type {
    background-color: red;
}

仅在整个页面上选择第一个标题

3 个答案:

Demo fiddle