隐藏几个div的跨度[重复]答案

【问题标题】：Hides a span of several divs [duplicate]隐藏几个div的跨度[重复]
【发布时间】：2021-04-27 06:22:54
【问题描述】：

我在一个类中有几个 div，我想隐藏一个跨度。但我没有成功，我不知道为什么。我这样做了，但我发现这不是一个好的方法，从我在这里和其他平台上搜索的内容来看，它可以使用，这就是它对我不起作用的原因。你觉得哪里不对？

.similar list_prod > span.promotion {
     display: none;
}

<div class="similar list_prod">
    <div class="proditem">
        <div class="proditem_cover">
            <a href="" title=" " alt=" "></a>
            <span class="promotion">Test: Test</span>
        </div>
    </div>
</div>

【问题讨论】：

试试这个选择器 .similar.list_prod span.promotion
您的 CSS 选择器错误。 .similar list_prod 搜索名称为 similar 的类和其中的标签 <list_prod>。由于此类标签不存在，因此无法定位它。

标签： html css

【解决方案1】：

similar 和 list_prod 是同一元素的类。要同时使用它们，您需要使用. 类选择器.similar.list_prod 链接和连接它们

并且还要删除直接后代选择器>，因为跨度不是您的.similar.list_prod 元素的直接后代

在这里查看答案 -> Using two CSS classes on one element

.similar.list_prod  span.promotion {
     display: none;
}

<div class="similar list_prod">
    <div class="proditem">
        <div class="proditem_cover">
            <a href="" title=" " alt=" "></a>
            <span class="promotion">Test: Test</span>
        </div>
    </div>
</div>

【讨论】：

@tacoshy 是的。感谢您的反对
当你修复它时我撤销了它......
@tacoshy 是的。感谢您的支持

【解决方案2】：

当你想定位一个有两个类名的 div 时，比如这里的similar 和list_prod，你应该使用.similar.list_prod。

此外，将直接子运算符 > 替换为常规子运算符（空格字符），因为您的 span 是您的 div 的子代，但不是直接子代。所以，修正后的选择器变成：

.similar.list_prod span.promotion

【讨论】：

【解决方案3】：

您的选择器不正确，请尝试：

.similar.list_prod span.promotion {
     display: none;     
}

<div class="similar list_prod">
    <div class="proditem">
        <div class="proditem_cover">
            <a href="" title=" " alt=" ">asdfasfd</a>
            <span class="promotion">Test: Test</span>
        </div>
    </div>
</div>

此外，您发布的 HTML 的初始版本在 <a> 标记上缺少一个结束标记...。确保您的实际代码没有同样的问题。

【讨论】：