Question

根据MDN，大纲应该在::selection伪元素上起作用，但是在chrome和ff上进行测试时似乎都没有。

::selection {
  background-color:red;
  outline:2px dashed blue;
}

My cool text, select me!

我正在创建一个文本编辑器，基本上它只是让我烦恼选择背景颜色的紧密程度。我想将其扩展几个像素，然后轮廓将是该工作的正确属性，但它不起作用？

Answer 1

我认为MDN错误或未更新，因为如果我们引用the specification：

突出显示伪元素只能由不影响布局的有限属性设置样式。以下属性适用于突出显示的伪元素：


颜色

背景色

光标

插入颜色

文本装饰及其相关属性

文本阴影

描边颜色，填充颜色和描边宽度

未列出outline，这说明了为什么它不起作用。另外，我认为您无法控制高光区域。如同一规范中所述：

对于文本，相应的叠加层必须至少覆盖整个em框，并且可以在em框的上方/下方延伸到线框边缘。两个字符之间的间距也可能是覆盖区域的一部分，在这种情况下，它属于包含两个字符的最里面的元素，并且在选择了两个字符时会被选中。

我们已经有了一个em盒子，这是不重要的，如果行框更高，最好的运气是它更多，但是不会表现出相同的跨浏览器。

这是一个基本示例，其中我使用字体大小较大的伪元素来增加行框的高度，并在中间对齐它。在这种情况下，选择内容将覆盖文本以外的所有内容，但是当然这也会影响布局，这可能是不必要的，并且不适用于所有浏览器。

以下示例在Chrome上有效，而在Fiferfox上不适用

p:after {
  content: "";
  font-size: 30px;
  vertical-align: middle;
}

p::selection {
  background-color: red;
}

<p>My cool text, select me!</p>

另一个重要的事情是，在该区域内应用的所有属性都不会溢出该区域。我们知道，使用text-shadow可以将阴影放置在距文本较远的位置，但是通过选择就不可能了，因为它不会溢出高亮区域：

p {
  text-shadow:0 10px 0 red;
}

p::selection {
  background-color: red;
  text-shadow:0 -10px 0 blue;
}

<p>My cool text, select me!</p>

请注意，就像我们对红色区域应用overflow:hidden一样，蓝色文本阴影如何部分可见。因此，即使您能够使用轮廓来设置选区的样式，基本上也无法控制其尺寸，这就是您所需要的。

我认为您最好的选择是依靠JS创建动态元素或包装所选文本以轻松设置样式。使用CSS，您只能应用一些会影响您的布局的技巧。

Answer 2

第一行之外的另一行对line-height有效。如您所见：

div {
  line-height:30px;
}

div::selection {
  background: yellow;
}

<div>text<br />text<br />text</div>

因此，我做了一个Javascript技巧，为我们增加了第一行。我还为第一行提供了font-size: 0px。这样我们的问题就解决了。如您所见：

let a = document.querySelectorAll(".a");

a.forEach(function(par){
  par.insertAdjacentHTML('afterbegin','needed text<br />')
})

// for an unseen first line.

.a {
  line-height:50px;    
}

.a::selection {
  background: yellow;
}

.a::first-line {
  font-size:0px;
  line-height:0px;
}

<div class="a">text</div>

展开所选文本的背景色矩形

2 个答案: