多个CSS3 ::选择

Question

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

页面上所有文字的默认 ::选择可以选择

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

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

这是我的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; }