Question

.PaneToBehiddenForMobile
    {
        display: none;
    }

DnnModule-ListBlogByCategory

我有一个包含以下类PaneToBehiddenForMobile的div 我有一个内部div与DnnModule-ListBlogByCategory

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

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

    </div>
    <div >

    </div>
</div>

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

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

Answer 1

您可以隐藏PaneToBehiddenForMobile div中的所有div而不是隐藏自身并仅显示所需的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;
    }
}

控制块层次结构。隐藏所有div，但隐藏一个特定类

3 个答案: