CSS :: inner僞元素的可能性

CSS2具有::before和::after僞元素，它使樣式表能夠以先前需要向頁面添加額外的非語義元素的方式來改變文檔，如「style-hooks」。CSS :: inner僞元素的可能性

我感到驚訝的是CSS3沒加這將消除的HTML「divitis」更多的情況下任何::inner或::outer僞元素 - 當頁面包含許多<div class="wrapper">元素，純粹作爲風格鉤零語義值。 CSS3的多重背景圖像和每盒梯度的支持幫助，

一個最近的情況涉及該標記：

<div> 
    <img src="foo.jpg" /> 

    <h3>Heading</h3> 
    <p>Lorem ipsum</p> 
    <p>Dolor sit amet</p> 
</div> 

<!-- followed by the same markup template (with a different img src and paragraph text) repeated several times -->

可視化頁面設計呼籲<img />元素被定位或浮動到側（內。填補了文檔寬度，以及文本和標題應該有一個粗邊框周圍，而不是圖像<div>的約束

理想的情況下，用一個假設的::inner元素，這可以解決像這樣：

div { 
    display: block; 
    background: white; 
    position: relative; 
} 
div::nth-of-type(odd) { background: #FEFEFE; } 

div > img { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
div::nth-of-type(odd) > img { 
    left: auto; 
    right: 0; 
} 

div::inner { 
    border: 5px solid #CECECE; 
    max-width: 20em; 
}

然而，我不得不解決上添加一個包裝元件：

<div> 
    <img src="foo.jpg" /> 

    <div> 
     <h3>Heading</h3> 
     <p>Lorem ipsum</p> 
     <p>Dolor sit amet</p> 
    </div> 
</div>

（與div::inner選擇替換div > div）。

我相信這可能是與Polyfill.js來完成運行querySelectorAll爲目標的元素和包裝分別的內容，或元素本身，以及應用性能對那些新的元素來處理「::inner」和「::outer」選擇。我想知道是否有人已經完成了這項工作，或者是否有瀏覽器已經作爲專有擴展支持此功能 - 例如IE如何使用::before(n)語法支持多個::before和::after僞元素。

來源

2016-07-19 Dai

':: inner'如何知道它應該包裝哪些元素？ ..我的意思是在'div div'的情況下，這是顯而易見的 – LGSon

我在這裏做了初稿，[fiddle demo]（https://jsfiddle.net/LGSon/mhz8twgo/），雖然絕對定位的圖像給了我一些問題（因爲他們把圖像從流中拿出來），所以我現在去掉了定位。該草稿使用固定的圖像高度，並且僞相同。 – LGSon

由於絕對定位的形象會導致問題，因此具有這些問題的目的是什麼？ – LGSon

您所描述的問題可以通過calc(...)和浮動圖像來解決，請參閱此處的演示：http://codepen.io/askl/pen/zBRbJB。

div { 
    border: 5px solid #CECECE; 
    width: calc(100% - 120px); 
    overflow: visible; 
} 

div > img:first-child { 
    float: right; 
    margin-right: -110px; 
    margin-top: -5px; 
}

正如LGSon的評論指出這是不完全清楚如何的:inner僞元素會在這個問題上提供幫助。不過，我傾向於同意，在實踐中有些情況下，這些僞元素是有用的。可能是flexbox是答案的一部分;然而，我無法解決你的特定問題，一個簡單的寬度和浮動的方法似乎更容易。

來源

2016-07-19 20:21:57

CSS :: inner僞元素的可能性

回答

相關問題