重要的属性为两个屏幕分辨率 [英] important property for two screen resolution

问题描述

假设我有以下代码：

 < ul> 
< li> Menu1 
< ul class =submenu> 
< li class =firstmenu> submenu-1< / li> 
< li> submenu-2< / li> 
< li>子菜单-3< / li> 
< / ul> 
< / li> 
< li> Menu2 
< ul class =submenu> 
< li class =firstmenuid =first> submenu-1< / li> 
< li> submenu-2< / li> 
< li>子菜单-3< / li> 
< / ul> 
< / li> 
< / ul> 
  

这里，我给padding左边子菜单 li 具有以下代码的第一个项目：

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

但 Menu2 的第一个 / code>，我想要不同的填充。因为我已经使用它的ID像这样：

  #first { padding-left：500px！important;} 
  

所以基本上， c $ c>！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）。

想要使用不同的 padding 屏幕分辨率768到894.

有办法吗？

解决方案

摘要

！important anotation在 CSS优先方案。此案例是为什么使用！important不鼓励的。

解决方法是删除！important 的需要。它可以通过许多方式实现，如下所示：

  .submenu li.firstmenu {
 padding-left：173px; 
} 
 
 .submenu li.firstmenu＃first {
 padding-left：500px 
} 
 
 @media只有屏幕
和（min-width：768px）
和（max-width：894px）{
 .submenu li.firstmenu＃first {
 padding-left：150px; 
} 
} 
  

注意 >

上面的选择器基本上与你的相同，但使用 firstmenu 类，就像你在HTML布局上看到的那样， - 选择器：first-child 。 .submenu li.firstmenu states 选择一个 li firstmenu，并且是其子类是子菜单的任何元素的后代， .submenu li：first-child states 选择 li 元素，其父元素的第一个子元素和类为submenu的任何元素的子元素。

要根据请求细化填充，使用目标元素的 id 。 子菜单li.firstmenu＃first 状态 选择ID等于myid的li元素，其类别为firstmenu是任何元素的后代，其类别是子菜单。对于此HTML布局，只使用id选择器（ #firstmenu ）可以实现相同的结果，如在其他答案中所见。

Supppose I have following code :

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

Here, I have give padding-left to sub-menu's li first item with following code:

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

But for Menu2 's first li, I want different padding.So for that I have used its ID like that :

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

So basically, I have overridden the previous left with !important.

Now I want to make it responsive, so for that I am using :

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

But as I have already given !important to @media all, it is not considering @media only screen and (min-width : 768px) and (max-width : 894px).

So basically I want to use different padding for screen resolution 768 to 894.

Is there any way to do it?

解决方案

Summary

The !important anotation has the highest priority on the CSS priority scheme. This case is a good example of why is the use of !important discouraged.

The solution is to remove the need of !important. It could be accomplished in many ways, as the one presented below:

.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;
    }
}

Notes

The selectors above are essentially the same as yours, but use the firstmenu class as it's seen on your HTML layout instead the pseudo-selector :first-child. .submenu li.firstmenu states select a li element whose class is "firstmenu" and is descendant of any element whose class is "submenu", while .submenu li:first-child states select a li element, first child of its parent and descendant of any element whose class is "submenu".

To refine the padding as requested, the id of the target element is used. submenu li.firstmenu#first states select a li element with ID equal to "myid", whose class is "firstmenu" and which is descendant of any element whose class is "submenu". The same result could be accomplished for this HTML layout using only the id selector (#firstmenu), as seen on other answers.

这篇关于重要的属性为两个屏幕分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！