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

Question

我有一个页面,默认文本选择CSS应用于设置background-color为灰色和color黑色.

现在,对于网页的一部分,我想保留color文本选择.我尝试使用覆盖该部分的选择CSS color: inherit;.它适用于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>

我想保留colorhtml的部分覆盖类,我无法更改默认选择CSS.

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

Answer 1

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

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

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

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

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

inherit尽管需要对 HTML 进行一些细微的修改，但无需使用伪类即可实现所需的行为:not()。这背后的原则是：

• 您可以background-color使用以下命令覆盖所有元素::selection {background: #c6c6c6;}
• 将override类移至p元素本身
• 您可以覆盖除具有以下color类的元素之外的所有元素.override:not(.override)::selection{color: #000;}
• .p0{color: blue;}添加以表明更改正在生效

我不认为在不修改 HTML 的情况下可以获得这种行为，因为:not()伪类只接受简单的选择器。

::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 小提琴示例

或者，您可以在不修改 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 小提琴示例