如何优化此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-meetid嵌套了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