Question

我在使用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;
}

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

Answer 1

无需每次都对同一分辨率的媒体查询进行编写。您可以将所有内容组合成一个。此外，没有名为＆＃34; section＆＃34;和类名为＆＃34; block-system-main＆＃34;。

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

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

Answer 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。我认为这应该有用。

处理部分或类不起作用

2 个答案: