css - 多个 CSS3::选择

Question

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

页面上所有文本的默认::selection否则可以选择

::-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; }