Question

我遇到了两个奇怪的问题，并认为它们可能是相关的。第一个是 - 我想在我的div下创建阴影，就像在本教程中http://codepen.io/haibnu/pen/FxGsI一样。但无论出于何种原因，都会忽略此任务的所有伪元素。我使用bootstrap，所以这里是标记：

<div class="row">
        <div id="content" class="col-sm-4">
           <div id="article">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>

其中#article是我想要阴影的div。

css与提供的链接大致相似，虽然我尝试了许多其他选项，但无论我在＆amp;：before或＆amp;：after之后做什么，它都没有任何效果。

然后我注意到，虽然媒体查询位于css文件的最末端，但我的媒体查询中的所有样式都不会在没有！重要的情况下工作。

这可能是导致这些问题的一个原因，那又有什么用呢？我能做些什么来解决它们？（我已经搜索了很多，但问题仍然存在）

感谢您的帮助！

编辑：伪元素正在发挥作用，但媒体查询仍然没有重要的工作。我可以将它作为一个单独的问题发布（因为现在我看到这两个不相关），但如果有答案，请帮助我。我使用scss，这就是它们的外观（放在.scss文件的最后）：

@media only screen and (min-width: 500px) and (max-width: 761px) {
    h3 {
        width: 50% !important;
        }
}

Answer 1

毕竟我得到了这些阴影，我认为他们没有显示的原因是我使用scss而且我的伪元素是这样嵌套的：

#article {
        position: relative;

             #article:before {
             z-index: -1;
             position: absolute;
             content: "";
             bottom: 15px;
             left: 10px;
             width: 50%;
             top: 80%;
             max-width:300px;
             box-shadow: 0 15px 10px #777;
             transform: rotate(-3deg);
               }
            }

但是只有当我把它们拆开时它们才能起作用：

#article {
        position: relative;
    }
             #article:before {
             z-index: -1;
             position: absolute;
             content: "";
             bottom: 15px;
             left: 10px;
             width: 50%;
             top: 80%;
             max-width:300px;
             box-shadow: 0 15px 10px #777;
             transform: rotate(-3deg);
            }

我希望，情况就是这样。

伪元素和媒体查询被忽略

1 个答案: