Question

所以我有这个CSS：

.addthis_toolbox {
display: none;
}

.title_offeringHope .addthis_toolbox {
display: block;
}

由于某种原因，不会显示带有“title_offeringHope”类的div下的.addthis_toolbox。

这有什么理由吗？我该如何解决这个问题？

这是HTML：

<div class="h_lft_column">
<h2 class="title_OfferingHope">
<span>Offering Hope &amp; Real Help</span>
</h2>
<p>CONTENT</p>
<div class="addthis_toolbox addthis_default_style " addthis:title="Offering Hope & Real Help " addthis:url="URL">
<a class="addthis_button_facebook_like at300b" fb:like:layout="button_count" title="Send to Facebook_like" href="#">
<fb:like class=" fb_edge_widget_with_comment fb_iframe_widget" href="URL" font="arial" width="90" action="like" show_faces="false" layout="button_count" ref=".T0znaEuo91k.like">
</a>
<a class="addthis_button_tweet at300b" title="Tweet" href="#">
<iframe class="twitter-share-button twitter-count-horizontal" scrolling="no" frameborder="0" allowtransparency="true" src="URL" style="width: 109px; height: 20px;" title="Twitter Tweet Button">
</a>
<a class="addthis_counter addthis_pill_style" style="display: block;">
<a class="atc_s addthis_button_compact">
<a class="addthis_button_expanded" title="View more services" href="#"></a>
</a>
<div class="atclear"></div>
</div>
</div>

Answer 1

由于.addthis_toolbox中没有类h2的元素.title_offeringHope，因此第二个CSS声明为空，将被忽略。

Answer 2

试试这个：

.h_lft_column .addthis_toolbox {
    display: block;
}

“title_offeringHope”不是HTML中“title_offeringHope”的父级。

Answer 3

查看您提供的代码，css中没有引用此行的元素：

.title_offeringHope .addthis_toolbox

这意味着在类addthis_toolbox的元素中应该有一个类title_offeringHope的元素。没有这样的元素存在。

Answer 4

类名区分大小写！因此<h2 class="title_OfferingHope">与CSS .title_offeringHope不匹配。

另见其他答案。他们可能会在那里做点什么。

Answer 5

因为它在标题之后，而不在其中，它需要一个+来指定div跟随title_offeringHope; - ）

.title_offeringHope + .addthis_toolbox 
{
display: block;
}

试图隐藏CSS类，但然后尝试显示子类

5 个答案: