1

我有#wants-to-meet1150px 的 id，我想更改它的 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 个标签，这可能是原因吗？

你知道为什么会这样吗？

4

4 回答 4

5

这散发着不良嵌套的味道。一个很好的经验法则是只嵌套三到四层深。如果您在标记中使用 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

于 2013-07-01T20:04:07.607 回答
2

问题是有更具体的选择器因此 a#wants-to-meet是不够的。

一个肮脏的修复将是：

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

覆盖更具体的匹配器值。不过，您应该通读并理解所有关于特异性的知识，以了解哪条路径最适合您，以及为什么。

于 2013-07-01T20:04:38.763 回答
1

在可能的情况下，您应该在为该元素设置样式的任何地方使用 id 选择器 - 这应该足够具体，因为您不能多次使用相同的 id。

#wants-to-meet {

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

我相信样式被划掉的原因是因为border-radius支持标准版本 - 所以该-moz版本被标准版本覆盖。

于 2013-07-01T20:02:36.187 回答
1

您在第 1776 行的 CSS比第 1900 行的规则更具体；这就是为什么第 1900 行的声明都被划掉的原因。当然，这种特殊性来自非常深的 Sass。

于 2013-07-01T20:04:32.210 回答