Question

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

IN CSS：

li:first-letter  {
                   color:blue;
                  }

JQUERY：

$(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');
});

FIDDLE

Answer 2

http://www.w3.org/wiki/CSS3/Selectors/pseudo-elements/:first-letter查看此示例。

此外，您应该为文字使用p或span或div。

IN CSS：

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

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

JQUERY：

$(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/

切换第一个字母的CSS属性以禁用，并在再次单击时重新显示

2 个答案: