Css 如何优化此SASS媒体查询？

我有一个id

#想要满足

，在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，我的

#想要满足
id嵌套了8个标签深，这可能是原因吗

您知道为什么会出现这种情况吗？
如果可能，您应该在设置元素样式的任何位置使用id选择器-这应该足够具体，因为您不能多次使用相同的id

#wants-to-meet {

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

我认为样式被划掉的原因是因为支持标准版本的
边界半径
，所以
-moz
版本被标准版本覆盖。
在可能的情况下，您应该在为该元素设置样式的任何位置使用id选择器-这应该足够具体，因为您不能使用多次使用相同的id

#wants-to-meet {

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

我认为该样式被划掉的原因是因为支持标准版本的
-border radius
，所以
-moz
版本被标准版本覆盖。
这散发出不良嵌套的味道。这是一个很好的经验法则，只嵌套三个或四个层次深。如果在标记中使用ID，则根本没有理由嵌套，因为ID只能出现一次

基本上，你不是对浏览器说
#想见面
，而是说
#想见面
（浏览器说ok，明白了）这是
#请求#详细信息
（浏览器说ok，明白了）的孩子，这是
#td详细信息
（浏览器说ok，明白了）的孩子，这是
#消息#容器
（浏览器说ok，明白了）那是
#li的孩子（浏览器说ok，明白了）

这是多余的。请在此处熟悉CSS特性：

旁注：用html元素命名类或ID是一种糟糕的做法，就像你用
#li>
命名一样。这种嵌套方式很糟糕。根据经验，最好只嵌套三到四层。如果你在标记中使用ID，根本没有理由嵌套，因为ID只能出现一次

基本上，你不是对浏览器说
#想见面
，而是说
#想见面
（浏览器说ok，明白了）这是
#请求#详细信息
（浏览器说ok，明白了）的孩子，这是
#td详细信息
（浏览器说ok，明白了）的孩子，这是
#消息#容器
（浏览器说ok，明白了）那是
#li的孩子（浏览器说ok，明白了）

这是多余的。请在此处熟悉CSS特性：

旁注：用html元素命名一个类或ID是一种可怕的做法，就像你在
#li.msg
第1776行的CSS比第1900行的规则更糟糕；这就是为什么第1900行的声明都被划掉了。当然，这种特殊性来自于非常深刻的Sass。
你的CSS在第1776行第1776行比第1900行的规则更重要；这就是为什么第1900行的声明都被划掉了。当然，这种特殊性来自于非常深刻的Sass。
问题在于，因此有一个
想要满足的
是不够的

脏补丁将是：

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

覆盖更具体的匹配器值。不过，您应该通读并了解所有相关内容，以了解哪条路径最适合您，以及原因。
问题在于，因此，仅满足
#的需求是不够的

脏补丁将是：

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

覆盖更具体的匹配器值。不过，您应该通读并了解所有信息，以了解哪条路径最适合您，以及原因。
注意：对于我在媒体查询中尝试更改的所有选择器，我必须从所有路径嵌套回“#li-affiliate-incoming-msg”注意：对于我在媒体查询中尝试更改的所有选择器呃，我必须从一路回到“li-affiliate-incoming-msg”，告诉那些显然不了解具体用途的人！重要是彻头彻尾的罪恶。啊，谢谢你！）虽然现在我了解了@imjared的作用，但我这样写我的SASS是因为它可以帮助我直观地组织一切。我现在必须对它进行进一步优化：（我知道了。用一个建议更新了答案。我只想把它列为一个简短的（危险的？）另一种选择。告诉显然不了解具体用途的人！重要是彻头彻尾的罪恶。啊，谢谢你！：）虽然现在我知道发生了什么，多亏了@imjared，我还是这样写我的SASS，因为它可以帮助我直观地组织一切。我现在必须对它进行进一步优化：（我知道这一点。用建议更新了答案。我只是想把它列为简短的（危险的？）备选方案。啊，谢谢！是的，这很有意义…我想我喜欢以一种视觉组织的方式编写CSS/SASS。这种方式对我来说很有意义，而且可以很快找到我需要的选择器。嗯，我会重新组织我的SASS，以避免对嵌套如此疯狂。谢谢你的链接！这超出了这个问题的范围，但你可能想重新研究ch嵌套媒体查询在SASS中。可以帮你很多。谢谢我找到了这个链接啊谢谢！是的，这很有意义…我想我喜欢写