css - 控制块层次结构。隐藏除具有特定类的所有 div

Question

.PaneToBehiddenForMobile
    {
        display: none;
    }

DnnModule-ListBlogByCategory

我有一个带有以下类 PaneToBehiddenForMobile 的 div 我有一个带有 DnnModule-ListBlogByCategory 的内部 div

<div class="PaneToBehiddenForMobile">
    <div class="DnnModule-ListBlogByCategory">

    </div>
 <a ...></a>
 <table>....</table>
    <div class="XYZ">

    </div>
    <div >

    </div>
</div>

在 css 中，我将PaneToBehiddenForMobile可见性设置为 none，以便隐藏其中的所有 div 和元素

现在我想要的是一个特定的带有类的 divDnnModule-ListBlogByCategory应该是可见的，而所有其他的都有相同的行为我怎么能只用 css

Answer 1

您可以隐藏 div 内的所有PaneToBehiddenForMobilediv，而不是隐藏自身并仅显示所需的 div。下面是它的 CSS 片段：

.PaneToBehiddenForMobile div {
    display: none;
}

.PaneToBehiddenForMobile .DnnModule-ListBlogByCategory {
    display: block !important;
}

Answer 2

我个人会使用:not()伪选择器（CSS3）。像这样：

.PaneToBehiddenForMobile div:not(.DnnModule-ListBlogByCategory){
    display:none;
} 

工作示例：http: //jsfiddle.net/zMfdQ/

当然，您需要做一个媒体选择器或服务器端选择要发送的 css，以便仅适用于移动视图。

HTH 尼克

Answer 3

你可以这样使用：

@media (max-width: 320px) {
.PaneToBehiddenForMobile
    {
        display: none;
    }
}