Question

我正在尝试将此规则应用于一个ID，我该怎么做呢

这存在于CSS中并且工作正常但我想仅为一个ID覆盖此规则 #menu-item-3091（这是一个标有“a”的“li”标签）我想留下这个

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
    background:rgb(243,80,128);
    outline:0;
    color:#999;
}

我尝试使用此代码修改，但我不明白为什么它不起作用你能解释一下，我错了

.sf-menu #menu-item-3091:hover, .sf-menu #menu-item-3091.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
    background:rgb(243,80,128) !important;
    outline:0;
    color:#999;
}

这是html

<ul class="sf-menu">
<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://www.example.com/contacts/">Contacts</a></li>
<li id="menu-item-3091" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3091"><a href="http://shop.example.com">Shop Online</a></li>
</ul>

提前谢谢

Answer 1

试试这个。假设您尝试更改a样式属性，则仅在a #menu-item-3091元素内定位li。

.sf-menu #menu-item-3091:hover, .sf-menu #menu-item-3091.sfHover,
.sf-menu #menu-item-3091 a:focus, .sf-menu #menu-item-3091 a:hover, .sf-menu #menu-item-3091 a:active{
    background:rgb(243,80,128) !important;
    outline:0;
    color:#999;
}

Answer 2

试试这个

我删除了其他选择器，只使用了特定ID的选择器，只使用了标签

    #menu-item-3091 a:hover,  #menu-item-3091.sfHover,
.sf-menu a:focus, .sf-menu a:active{
    background:rgb(243,80,128) !important;
    outline:0;
    color:#999;
}

DEMO

关于伪类的CSS问题

2 个答案: