【问题标题】：color: inherit; does not work with ::selection in IE or EDGE颜色：继承；不适用于 IE 或 EDGE 中的 ::selection
【发布时间】：2016-02-13 21:32:35
【问题描述】：

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

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

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

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

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

我想为带有类覆盖的 html 部分保留 color，但我无法更改默认选择 CSS。

JS Fiddle 链接：https://jsfiddle.net/h30jczkv/1/

【问题讨论】：

这种情况下IE可能不支持inherit，为什么不使用.p1, .p1::selection{color:red;}呢？
这只是一个小例子。实际上，可以有很多这样的元素，我不知道每个元素的颜色。
@manpreetsingh Oye MP :)

标签： html css internet-explorer selection

【解决方案1】：

这不起作用，因为 IE 不支持它

在设置::selection 伪元素样式时，IE 不支持inherit：

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

::selection 伪元素 (https://msdn.microsoft.com/en-us/library/jj127349(v=vs.85).aspx)

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

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

您使用::selection {background: #c6c6c6;} 覆盖所有元素的background-color
将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

【讨论】：