Com*_*ity 20 css css-selectors twitter-bootstrap
我正在看Twitter的bootstrap框架,我确实有一个非常小的问题.
我将看到以下部分,以便将盒子模型设置为border-box.
*, *::after, *::before { box-sizing: border-box; }
但是如果你看一下CSS规范的*目标是所有元素,那么为什么选择使用*::after和*::before选择器呢？
对我来说,这似乎已经过时了,因为*选择器已经标记了所有元素.
Tom*_*ara 19
看到这两个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>
更改框大小content-box,border-box只改变段落的大小,而不是它的::after元素.正如其他人所指出的那样,这是因为它们被命名为伪元素,必须单独定位.
看起来*不会以psuedo元素为目标(正如@Harry指出的那样,符合CSS规范)
Har*_*rry 17
*选择所有元素吗？
不,*不包括伪元素.它们仅涵盖DOM中存在的真实元素.
来自W3C规格:
通用选择器,写为CSS限定名 [ CSS3NAMESPACE ],带有星号(*U + 002A)作为本地名称,表示任何元素类型的限定名称.如果没有为选择器指定默认名称空间,它表示任何名称空间(包括没有名称空间的名称空间)的文档树中的任何单个元素.
重点是我的
为什么在*选择器下指定的属性对某些人而不是其他人有效？
对于某些属性,color您会得到*应用于包括伪的所有元素的错觉,因为它们是子级可以从其父级继承的属性.
box-sizing 另一方面,它不是一个继承的属性,因此必须在伪元素上明确提及.
注意:虽然伪元素被命名为before,after但它们实际上是它所附加元素的子元素.
举例说明继承:
看看下面的代码片段,看看黑色border是如何仅应用于真实元素的.在伪元素中,只有p:after获取,border因为它直接在伪元素本身上指定.在div:after得到没有边框.
* { /* selects all real elements */
border: 1px solid black; /* not an inheritable property and so pseudos don't get it */
padding: 10px;
color: red; /* inheritable property and so pseudos which are children inherit it */
}
div::after {
content: 'abcd';
margin: 4px;
}
p::after {
content: 'abcd';
margin: 4px;
border: 1px solid red;
}<div>abcd</div>
<p>abcd</p>可继承属性列表是什么？
您可以在此处找到有关子项可以从其父项继承的属性列表的更多详细信息.
你基本上回答了自己的问题.::before并且::after是伪元素.这个名字甚至暗示它们并不代表真正的元素.
选择器*, *::before, *::after旨在匹配:
* DOM中存在的所有元素*::before::before相对于DOM中存在的所有元素的伪元素*::after::after相对于DOM中存在的所有元素的伪元素由于伪元件并不限定为满元件(<html>,<head>,<body>等),但它们不是DOM的一部分,它们不是由星号字符匹配.它们仅在参考另一个元素时被选中.出于同样的原因,无法在JavaScript中选择它们.JavaScript只选择它可以在DOM中找到的元素,这在引用伪元素时是不正确的.
引用MDN:
您只能在选择器中使用一个伪元素.它必须出现在语句中的简单选择器之后.
W3C使用以下定义定义了一个简单的选择器:
简单选择器用于匹配DOM中存在的元素.伪元素必须遵循简单的选择器,因为它不是DOM本身的一部分,因此不能归类为元素.由于*是一个简单的选择器,特别是通用选择器,CSS中的伪元素可以链接到它以匹配所有特定的伪元素类型.没有伪元素选择器,只剩下一个简单的选择器(*).
| 归档时间： |
|
| 查看次数： |
3252 次 |
| 最近记录： |