如何为嵌套元素编写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
}