jquery - 两个屏幕分辨率的重要属性

Question

假设我有以下代码:

    <ul>
        <li>Menu1
            <ul class="submenu">
                <li class="firstmenu">submenu-1</li>
                <li>submenu-2</li>
                <li>submenu-3</li>
            </ul>
        </li>
        <li>Menu2
            <ul class="submenu">
                <li class="firstmenu" id="first">submenu-1</li>
                <li>submenu-2</li>
                <li>submenu-3</li>
            </ul>
        </li>
    </ul>

在这里，我使用以下代码为子菜单的 li 第一项提供 padding-left:

   .submenu li:first-child{padding-left: 173px;}

但对于 Menu2 的第一个 li，我想要不同的填充。因此，我使用了它的 ID:

#first{padding-left:500px !important;} 

所以基本上，我已经用 !important 覆盖了之前的左边。

现在我想让它响应，所以我正在使用:

    @media only screen
    and (min-width : 768px)
    and (max-width : 894px) {
        #first{padding-left:150px !important;}
    }

但是由于我已经将 !important 给了 @media all，它不考虑 @media only screen 和(最小宽度:768px) 和(最大宽度:894 像素)。

所以基本上我想为屏幕分辨率 768 到 894 使用不同的填充。

有什么办法吗？

Answer 1

总结

!important 注释在 CSS priority scheme 上具有最高优先级.这个案例是why is the use of !important discouraged的一个很好的例子.

解决方案是删除 !important 的需要。它可以通过多种方式实现，如下所示:

.submenu li.firstmenu{
    padding-left: 173px;
}

.submenu li.firstmenu#first{
    padding-left:500px
}

@media only screen
and (min-width : 768px)
and (max-width : 894px) {
    .submenu li.firstmenu#first{
       padding-left:150px;
    }
}

注意事项

上面的选择器与您的基本相同，但使用 firstmenu 类，因为它在您的 HTML 布局中看到，而不是伪选择器 :first-child。 .submenu li.firstmenu states 选择一个 li 元素，其类为“firstmenu”并且是任何类为“的元素的后代” submenu"，而 .submenu li:first-child states 选择一个 li 元素，它的父元素的第一个子元素以及类为“submenu”的任何元素的后代。

要根据要求细化填充，使用目标元素的 id。 submenu li.firstmenu#first states 选择一个 li 元素，其 ID 等于“myid”，其类为“firstmenu”，并且是任何元素的后代类是“子菜单”。对于此 HTML 布局，仅使用 id 选择器 (#firstmenu) 即可获得相同的结果，如其他答案所示。