Question

CSS2具有::before和::after伪元素，这使得样式表能够以之前需要向页面添加额外的非语义元素的方式更改文档作为“样式挂钩”。 / p>

我很惊讶CSS3没有添加任何::inner或::outer伪元素，这会消除更多HTML“divitis”案例 - 当页面包含许多<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来处理“::inner”和“::outer”选择器，方法是为目标元素运行querySelectorAll并分别包装其内容，或者元素本身，并将属性应用于这些新元素。我想知道是否有人已经完成了这项工作，或者是否有任何浏览器支持此功能已作为专有扩展 - 例如IE如何使用{{1}支持多个::before和::after伪元素语法。

Answer 1

您描述的问题可以通过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是答案的一部分;但是，我无法用它来解决你的特殊问题，一种简单宽度和浮动的方法似乎要容易得多。

CSS :: inner伪元素

1 个答案: