解决部分或类不起作用答案

【问题标题】：Adressing a section or class does not work解决部分或类不起作用
【发布时间】：2014-08-18 05:19:11
【问题描述】：

我的 style.css 在某个类中使用我的样式时遇到问题。类结构如下所示。到目前为止，我尝试进行的更改是：

@media (max-width:920px)    
{
                #section         {padding-left:20px !important}
}

@media (max-width:920px)    
{
                #block-system-main       {padding-left:20px !important}
}

@media (max-width:920px)    
{
                .block-system-main       {padding-left:20px !important}
}

@media (max-width:920px)    
{
                .block .block-system .clearfix       {padding-left:20px !important}
}

类结构如下：

    <section id="block-system-main" class="block block-system clearfix">
        <div id="node-493" class="node node-meeting node-promoted node-teaser clearfix"

当我右键单击并检查元素时，我在 css 代码中发现了一个位置，其中某些样式自动应用于此类。看起来是这样的：

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

“部分”在这里被强调为蓝色，所以我想这是在这种情况下很重要的类。如果我写了 padding-left:20px;在代码的那部分，一切正常，但我不明白为什么我的解决方案不起作用......

【问题讨论】：

仅将 #section 替换为 section。

标签： css class twitter-bootstrap drupal sections

【解决方案1】：

无需每次都为相同的分辨率编写媒体查询。您可以将所有内容合并为一个。也没有名为“section”的id和名为“block-system-main”的类。

 @media all and (max-width: 920px)   
{
    section.block-system{padding-left:20px !important}
}

只需添加上面的一行而不是整个代码。

【讨论】：

【解决方案2】：

CSS：

@media (max-width:920px)    
{
                section         {padding-left:20px !important}
}

@media (max-width:920px)    
{
                #block-system-main       {padding-left:20px !important}
}

@media (max-width:920px)    
{
                .block-system-main       {padding-left:20px !important}
}

@media (max-width:920px)    
{
                .block .block-system .clearfix       {padding-left:20px !important}
}

section 是一个标签，所以不要使用 #section 。我认为这应该可行。

【讨论】：