多个 CSS3 ::selection

Question

好的，我希望能够在我的页面上为各种文本设置多个背景，例如，如果用户突出显示文本，h1 应该是不同的颜色，h2 应该是不同的颜色，等等。

我的默认 ::selection 用于页面上所有可以选择的文本

::-moz-selection { background:#fff; color:#fff; }
::selection { background:#fff; color:#fff; }

但是我希望我的一些不同颜色的单词有不同的背景::selection

下面是我的html：

<span class="bigblue bigblueselect">Snoop Lion</span>

CSS 如下：

   .bigblue {color:#69b5e1;} 

    .bigblueselect ::-moz-selection { background:pink; }
    .bigblueselect ::selection { background:pink; }

如何在一个页面上获得多个 CSS3 ::selection？谢谢，我想不通，我把这里作为最后的手段。我希望某些标题/文本在被选中时具有不同的背景颜色，但我不太明白。

Answer 1

您需要删除.bigblueselect 和::selection 之间的空格，因为这是一个后代选择器，因此它只适用于后代元素而不是您的.bigblueselect 本身：

.bigblueselect::-moz-selection { background:pink; }
.bigblueselect::selection { background:pink; }