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第一项提供了填充：

   .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 and (min-width : 768px) and (max-width : 894px)。

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

有什么办法吗？

Answer 1

<强>摘要

!important anotation在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;
    }
}

备注

上面的选择器与你的选择器基本相同，但是使用在HTML布局上看到的firstmenu类而不是伪选择器:first-child。 .submenu li.firstmenu 州 选择一个li元素，其类为“firstmenu”，并且是其类为“submenu”的任何元素的后代，而{{ 1}} 状态 选择一个.submenu li:first-child元素，其父级的第一个子元素及其类别为“子菜单”的任何元素的后代。

要根据请求细化填充，请使用目标元素的li。 id 状态 选择ID等于“myid”的li元素，其类为“firstmenu”，并且是类为“submenu”的任何元素的后代。对于此HTML布局，只能使用id选择器（submenu li.firstmenu#first）来完成相同的结果，如其他答案所示。

Answer 2

在您的情况下，您实际上并不需要!important，因为ID选择器具有比classe / element选择器更高的优先级（除非在单个选择器中有数十个类或数百个元素）。移除!important，您仍然可以得到您想要的内容。

＆＃13;

.submenu li:first-child {
  padding-left: 100px;
}

#first {
  padding-left: 200px;
}

＆＃13;

<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>

＆＃13;

更多细节请参阅selectors' specificity上的W3C规范，这是一个非常直观的比较不同选择器的表格。

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

2 个答案: