双屏幕分辨率的重要属性
假设我有以下代码：
<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，我想要不同的padding.So，因为我这样使用了它的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。
有什么办法吗？
回答 2
Stack Overflow用户
发布于 2014-12-12 05:05:44
摘要
!important指定在CSS优先级方案上具有最高优先级。这个案例是为什么不鼓励使用！的一个很好的例子。
解决方案是消除对!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;
}
}Notes
上面的选择器与您的基本相同，但是使用firstmenu类，就像在您的HTML布局上看到的那样，而不是使用伪选择器:first-child。.submenu li.firstmenu 选择类为“first parent”且是类为“子菜单”的任何元素的后代的li元素，而.submenu li:first-child states则选择一个li元素，它的父元素的第一个子元素和类为“子菜单”的元素的后代。
为了根据请求细化填充，使用目标元素的id。submenu li.firstmenu#first 状态选择ID等于"myid“的li元素，它的类是"firstmenu”，它是任何类为“子菜单”的元素的后代。对于这个HTML布局，可以只使用id选择器(#firstmenu)完成相同的结果，就像在其他答案中看到的那样。
Stack Overflow用户
发布于 2014-12-12 05:03:51
在您的示例中，实际上不需要!important，因为ID选择器的优先级高于case /元素选择器(除非单个选择器中有几十个类或数百个元素)。删除!important，你仍然会得到你想要的东西。
.submenu li:first-child {
padding-left: 100px;
}
#first {
padding-left: 200px;
}<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>
更多细节请阅读W3C规范关于选择器特异性，有一个非常直观的表格比较不同的选择器。
https://stackoverflow.com/questions/27437130
复制相似问题
腾讯云开发者
