为什么使用* selector结合* :: before和* :: after [英] Why use * selector in combination with *::before and *::after

问题描述

我在看Twitter的bootstrap框架，我有一个很小的问题。

I was looking at the Twitter bootstrap framework and I do have a very small question.

我会看到以下部分为了设置框模型到 border-box 。

I'll see the following section in order to set the box-model to border-box.

*, *::after, *::before { box-sizing: border-box; }

但是如果你看一下CSS规范 * 定位所有元素，所以为什么在本地是 * :: after 和 * :: before 选择器？

But if you look at the CSS specifications * targets all elements, so why on earth is the *::after and *::before selector being used?

对我来说，这似乎已过时，因为 * 选择器已经标记所有元素。

To me, this seems obsolete because the * selector will already tag all elements.

推荐答案

查看这两个JSFiddles：

See these two JSFiddles:

http://jsfiddle.net/86gc1w6f/
http：// jsfiddle。 net / gwbp2vpL / 1 /

或尝试下列片段：

CSS：

* {
    box-sizing: content-box;
}

p {
    position: relative;
    width: 200px;
    border: 10px solid rgba(255, 0, 0, 0.5);
}

p::after {
    position: absolute;
    right: -100px;
    top: -10px;
    width: 100px;
    height: 30px;
    border: 10px solid rgba(0, 0, 255, 0.5);
    content: '';
}

HTML：

<p>
    A paragraph
</p>

更改内容框之间的框大小和 border-box 只会更改段落的大小，不它 :: after 元素。正如其他人所指出的，这是因为它们是伪元素，必须单独定位。

Changing the box-sizing between content-box and border-box only alters the size of the paragraph, not it's ::after element. As others have noted, this is because they are, as named, pseudo elements and must be targeted separately.

而不是以伪元素为目标（如@Harry所指出的，是根据 CSS规范） ）

It would appear that * does not target psuedo-elements (which as @Harry points out, is as per the CSS specification)

这篇关于为什么使用* selector结合* :: before和* :: after的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！