我可以同时使用 :first-letter 和 :hover 选择器吗？答案

【问题标题】：Can i use the :first-letter and the :hover selector together?我可以同时使用 :first-letter 和 :hover 选择器吗？
【发布时间】：2013-10-31 04:27:21
【问题描述】：

我有第一个字母选择器工作，以更改第一个字母的颜色，但是当悬停该区域时，颜色与背景匹配，因此它变得不可见。这是代码工作的一部分

.nav-menu li a:first-letter {color:#b5b503;}

.nav-menu li a:first-letter {font-weight:bold;}


.nav-menu li a {


    color: #fff;
    display: block;
    font-size: 15px;
    line-height: 1;
    padding: 15px 20px;
    text-decoration: none;
}

这是我想我应该添加一个 .first-letter 选择器的部分，但由于它已经是一个悬停选择器，所以无法找出它是怎么回事

.nav-menu li:hover > a,
.nav-menu li a:hover {

    background-color: #b5b503;
    color: #273664;
}

【问题讨论】：

标签： css hover css-selectors pseudo-element

【解决方案1】：

是的，你可以

示例 CSS：

p:first-letter {
    font-size: 120%;   
}
p:hover:first-letter {
    color: white;
}

HTML：

<p>Hello world</p>

在这里演示：http://jsfiddle.net/LRFw8/1/

对于您的代码，您可以在 .nav-menu li a:hover:first-letter 中设置样式

【讨论】：