jquery - 切换首字母 CSS 属性以禁用并在再次单击时重新出现

Question

我有一个列表，其中列表的第一个字母是不同的颜色。当前，当激活 jQuery 时，每个选定的列表项目符号的颜色都会发生变化，但第一个字母除外。任何人都知道 CSS 中的首字母属性以及如何通过切换禁用它？

在 CSS 中：

li:first-letter  {
                   color:blue;
                  }

查询：

$(document).ready(function(){
    $('li').click(function(){;
        $(this).toggleClass('selected');
        $('li:first-letter').css('color',''); //////????
    });
});

不工作；首字母 CSS 规则的作用就像它从未被 jQuery 触及一样。有人知道吗？谢谢！

Answer 1

你可以这样做：

$('li').click(function () {
    $('li.selected').removeClass('selected');
    $(this).toggleClass('selected');
});

小提琴

Answer 2

http://www.w3.org/wiki/CSS3/Selectors/pseudo-elements/:first-letter检查这个例子。

此外，您应该使用 ap 或 span 或 div 作为您的文本。

在 CSS 中：

li p:first-letter {
    color: blue;
}

li p.selected:first-letter {
    color: red;
}

查询：

$(document).ready(function () {
    $('li p').click(function () {
        $(this).toggleClass('selected');
    });
});

HTML：

<ul>
    <li>
        <p>Some text</p>
    </li>
</ul>

检查这个有效的jsfiddle：http: //jsfiddle.net/n9f94/13/