我正在看Twitter的bootstrap框架,我确实有一个非常小的问题.
我将看到以下部分,以便将盒子模型设置为border-box.
*, *::after, *::before { box-sizing: border-box; }
但是如果你看一下CSS规范的*目标是所有元素,那么为什么选择使用*::after和*::before选择器呢？
对我来说,这似乎已经过时了,因为*选择器已经标记了所有元素.
通用选择器是否*影响像:before和的伪元素:after？
让我举一个例子:
这样做时:
* { box-sizing: border-box; }
......没有上述声明包括自动/影响伪元素,如:before和:after呢？
或者,为了影响像:before和的伪元素:after,必须声明这个？
*, *:before, *:after { box-sizing: border-box; }
这有意义吗？
我总是使用just * { box-sizing: border-box; }而且从来没有任何关于伪元素的问题.但我看到许多教程正在做,*, *:before, *:after但他们从未真正解释为什么它们包含*:before, *:after在声明中.
考虑以下测试用例,其中浮动元素和内联元素放置在一个<fieldset>对比<div>:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.float {float:right; background-color:red; height:200px;}
</style>
</head>
<body>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
</body>
</html>
渲染时,场集是200像素高(它们清除浮点数？),而div只有内联元素高.这种行为的原因是什么,是否有一种解决方法允许字段集的行为与div一样？