如何为嵌套元素编写 CSS 代码？

Question

<div class="button share" style="display: none; float: left" id="share_btn_cont">
  <a href="javascript:void(0);" class="share_btn" id="share_btn" style="width:800px; display: block;">Share on Facebook</a>
</div>

这是我的 Facebook 分享按钮代码。我为<a> 元素添加了一些样式。我想知道如何在父文件中为其编写 CSS 代码。如何调出<a> 元素？

Answer 1

<a> 有一个类。只针对班级？

.share_btn {
   //styling goes here
}

Answer 2

如果你只想在一个外部css文件中为div内的所有按钮编写样式，

.button.share a.share_btn {
    // Add styles here;
}

您可以只添加a.share_btn，但这将适用于该类的所有<a> 标签。

如果你想将样式添加到这个按钮，在这个只有这个div里面，

#share_btn_cont #share_btn {
    // Add styles here;
}

您可以使用#share_btn_cont > a#share_btn，但这只会查找低一级的元素。

<div id="share_btn_cont"><a id="share_btn">Some Stuff</a></div>

适用于上述情况，不适用于以下情况。

<div id="share_btn_cont"><p><a id="share_btn">Some Stuff</a></p></div>

此外，将类用于一般用例，使用 id 仅针对特定元素。

Answer 3

.parent:first-child {
    //code
}