颜色：继承;不适用于IE或EDGE中的:: selection

Question

我有一个页面，其中应用默认文本选择CSS以将background-color设置为灰色，将color设置为黑色。

现在，对于网页的一部分，我想保留color文本选择。我尝试使用color: inherit;覆盖该部分的选择CSS。 它适用于Chrome和Firefox，但不适用于IE和EDGE。

我创建了一个小例子来解释我的问题：

＆＃13;

＆＃13;

::selection {
  color: #000;
  background: #c6c6c6;
}
::-moz-selection {
  color: #000;
  background: #c6c6c6;
}
.p1 {
  color: red;
}
.p2 {
  color: green;
}
.override ::selection {
  color: inherit;
}
.override ::-moz-selection {
  color: inherit;
}

＆＃13;

<div>
  <p>Heading 1</p>
  <div class="override">
    <p class="p1">Sub heading 1</p>
    <p class="p2">Sub heading 1</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望使用类覆盖保留html部分的color，我无法更改默认选择CSS。

JS小提琴链接：https://jsfiddle.net/h30jczkv/1/

Answer 1

这不起作用，因为IE

不支持 样式化inherit伪元素

时，I​​E不支持::selection

  

:: selection伪元素上的样式属性不支持“inherit”值。

:: selection pseudo-element（https://msdn.microsoft.com/en-us/library/jj127349(v=vs.85).aspx）

您可以执行以下操作以获得类似的结果

使用inherit伪类可以在不使用:not()的情况下实现所需的行为，尽管它需要对HTML进行一些细微的修改。这背后的原则是：

• 您使用background-color
覆盖所有元素的::selection {background: #c6c6c6;}
• 将override课程移至p元素本身
• 您覆盖所有元素的color，但.override类:not(.override)::selection{color: #000;}
的元素除外
• .p0{color: blue;}已添加，表明更改正在进行

我不认为在不修改HTML的情况下可以获得此行为，因为:not()伪类只接受simple selectors。

::selection {
  background: #c6c6c6;
}
:not(.override)::selection {
  color: #000;
}
.p0 {
  color: blue;
}
.p1 {
  color: red;
}
.p2 {
  color: green;
}

<div>
  <p class="p0">Heading 1</p>
  <div class="override">
    <p class="p1 override">Sub heading 1</p>
    <p class="p2 override">Sub heading 1</p>
  </div>
</div>

<强> JS Fiddle Example

或者，您可以在不修改HTML

的情况下实现此目的

如果您要覆盖的所有课程都以p开头，您可以使用[foo^="bar"]属性选择器：

::selection {
  background: #c6c6c6;
}
:not([class^=p])::selection {
  color: #000;
}
.t1 {
  color: blue;
}
.p1 {
  color: red;
}
.p2 {
  color: green;
}

<div>
  <p class="t1">Heading 1</p>
  <div class="override">
    <p class="p1">Sub heading 1</p>
    <p class="p2">Sub heading 1</p>
  </div>
</div>

<强> JS Fiddle Example