Question

这是我的代码的样子。因此，我删除了所有无用的信息。

<div class="container">
<div class="newsletter">
    <div class="newsletter_title">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4 col-xl-3 col">
                <h2 class=".newsletter .newsletter_title">
                <span>Newsletter</span>
                </h2>
            </div>
        </div>  
        <div class="row">
            <div class=" col-xs-12 col-sm-7 col-md-7 col-lg-8 col-xl-9 col">
                <div id="newsletter_embed_signup_scroll">
                    <div class="col-xs-12 col-md-12 col-lg-6 col-xl-5">
                        <h2 id="newsletter_embed_signup">Subscribe to our mailing list</h2>
                        <h3 id="newsletter_embed_signup">(And get a 10% voucher)</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

如您所见，<h2>和<h3>标签都具有不同的类和ID。在CSS样式表中，我指定了.newsletter .newsletter_title h2::before，然后将其也应用于了#newsletter_embed_signup。很有用，因为它共享同一个容器（？）。我想念什么？

Answer 1

要定位第一个h2，也要在选择器中包括第一个h2的类名称 "newsletter" ，

.newsletter .newsletter_title h2.newsletter::before {
  /* style properties here */
}

要定位第二个h2，请在选择器中引用h2的ID "newsletter_embed_signup" ，如下所示：

#newsletter_embed_signup::before {
  /* style properties here */
}

上面的相同方法也可以用于定位h3元素。

此外，与类名不同，ID应该是唯一的，其中每个ID名称只能使用一次。

为一组元素赋予通用的类名，或者为每个元素分配唯一的ID。

Answer 2

AndrewL64的答案是完全正确的。只是想指出一点，您不应该像下面的示例那样多次使用相同的ID：

<h2 id="newsletter_embed_signup">Subscribe to our mailing list</h2>
<h3 id="newsletter_embed_signup">(And get a 10% voucher)</h3>

否则，您很快就会遇到更多问题，因此请改用类。

在限制:: before到单个指定的h2方面进行挣扎

2 个答案: