如何优化此SASS媒体查询？

Question

我有id #wants-to-meet，在1150px我想改变它的CSS。

通常使用媒体查询我只需要定位id，有时我需要编写类似'parent-selector > targeted-selector'

的内容

但是我的媒体查询由于某种原因被划掉/否定：

出于某种原因，我需要深入才能让它发生变化：

@media all and (max-width: 1150px) {
            #li-affiliate-incoming-msg {
                #message_container {
                    #td-details {
                        #request_details {
                            #wants-to-meet {
                                margin-top: 5px;
                                margin-right: 0;
                                padding: 8px 20px 3px 20px;
                                color: blue;
                                background: red;
                            }
                        }
                    }
                }
            }
        }

我正在使用SASS，我的#wants-to-meet ID嵌套了8个标签，这可能就是这个原因吗？

你知道为什么会这样吗？

Answer 1

这种糟糕的嵌套方式。只有三到四级深度才是一个很好的经验法则。如果您在标记中使用ID，则没有理由进行嵌套，因为ID只能出现一次。

基本上不是向浏览器说#wants-to-meet，而是说#wants-to-meet（浏览器说好了，得到它）是#request_details的孩子（浏览器说好了，得到了它）这是#td-details的孩子（浏览器说好了，明白了）这是#message_container的孩子（浏览器说好了，明白了）这是#li-affiliate-incoming-msg的孩子（浏览器说好了，得到了它） ）。

这是多余的。在这里熟悉CSS特异性：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

旁注：使用html元素命名一个类或ID是一种可怕的做法，就像你似乎用#li-affiliate-incoming-msg

一样

Answer 2

问题在于more specific selector因此#wants-to-meet是不够的。

脏修复将是：

#wants-to-meet {
    some-prop: value !important;
}

覆盖更具体的匹配器值。不过，您应该仔细阅读并理解specificity的所有内容，以了解最适合您的路径以及原因。

Answer 3

如果可能的话，你应该只使用id选择器，无论你在哪个样式元素 - 这应该是特定的，因为你不能多次使用相同的id。

#wants-to-meet {

但是，你确实需要确保在任何地方以这种方式引用元素 - 因为更具体的选择器版本会给你带来级联困境。

我认为风格划掉的原因是支持border-radius的标准版本 - 因此-moz版本会被标准版本覆盖。

Answer 4

第1776行的CSS比第1900行的规则more specific;这就是为什么1900年的宣言都被划掉了。当然，这种特殊性来自非常深的Sass。