:: select伪元素在填充空间中被忽略，选择越界...？ [英] ::select pseudo-element ignored in fill space, selection going out of bounds...?

问题描述

我尝试应用，当然你会必须进行选择以获得效果）

如果任何人想要挑战解释我的逻辑，我的客人。但如果你不能解释它，只是告诉我如何使它看起来像：

那么这对我所做的就够了！

---

UPDATE ：在区域外出血时，标记@ ralph.m的回答。虽然它没有解决关于定制选择颜色损失的第二个问题。这只是似乎发生，每当你选择跨块级元素，其中包含块级元素和非块级元素作为子级。除非将文档结构更改为不具有该模式（和/或不关心），否则可能没有任何操作。

解决方案

使用 overflow：hidden; 通常适用于我。例如

  .fancy {
 overflow：hidden; 
} 
  

I'm trying to apply the non-standard, but pretty widely supported CSS pseudo-selector for setting the text color of selections in the browser. All seemed to be fine at first, and then the ice weasels came.

Let's say you have this HTML:

<div class="outside">
    So what's wrong with this picture?
    <div class="fancy">
        Custom selection color lost on right
        <div>But only on direct children</div>
        <div>Divs underneath are ok (?)</div>
    </div>
    ...aaand selection bleeds to outside div. :-/
</div>

With this CSS:

.outside {
    margin: 32px;
}

.fancy {
    color: white;
    background: green;
}

.fancy::selection, .fancy div::selection {
   background: #800080 !important;
}

What you get back is this, in Chrome/Safari:

(Here's a jsFiddle, and of course you'll have to make the selection to get the effect)

If anyone wants to pick up the challenge of explaining the logic of that to me, be my guest. But if you can't explain it and can just tell me how to make it look like:

Then that's more than good enough for what I'm doing!

---

UPDATE: Marking @ralph.m's answer as accepted regarding bleeding outside the area. Though it doesn't address that second issue about loss of the custom selection color. That just seems to happen whenever you select across a block-level element, which contains both block-level elements and non-block-level elements as children. There may not be anything to do about it besides change your document structure to not have that pattern (and/or not care)

解决方案

Using overflow: hidden; normally works for me. E.g.

.fancy {
    overflow:hidden;
}

这篇关于:: select伪元素在填充空间中被忽略，选择越界...？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！