::在填充空間中選擇被忽略的僞元素，選擇超出界限......？

Question

我試圖應用non-standard, but pretty widely supported CSS僞選擇器來設置瀏覽器中選擇的文本顏色。一開始似乎都很好，然後冰鼬來了。

比方說，你有這樣的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> 

有了這個CSS：

.outside { 
    margin: 32px; 
} 

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

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

你所得到的回覆是這樣，在Chrome/Safari瀏覽器：

（Here's a jsFiddle，當然你必須使選擇得到的效果）

如果有人想接受向我解釋這個邏輯的挑戰，做我的客人。但是，如果你不能解釋它，可以告訴我怎麼使它看起來像：

那麼這超過了我在做什麼不夠好！

---

UPDATE：標記@ ralph.m的答案接受關於區域外出血。雖然它沒有解決關於丟失自定義選擇顏色的第二個問題。只要您在塊級元素上進行選擇時就會發生這種情況，該塊級元素包含塊級元素和非塊級元素作爲子級。除了改變你的文檔結構以使其不具備該模式（和/或不在意）

Answer 1

使用overflow: hidden;通常適用於我。例如。

.fancy { 
    overflow:hidden; 
}