html - 伪类的 CSS 问题

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 样式属性，这将仅在 #menu-item-3091 li 中针对 a 元素。

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