星号(*)在 CSS 选择器中起什么作用？

我发现了这个 CSS 代码，我运行它来看看它是做什么的，它勾勒出了页面上的每一个元素,

有人能解释一下星号 *在 CSS 中的作用吗？

<style>
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
</style>
79040 次浏览
小开

* is a wildcard. What it means is that it will apply the style to any HTML element. Additional *'s apply the style to a corresponding level of nesting.

This selector will apply different colored outlines to all elements of a page, depending on the elements's nesting level.

小开
最佳答案

It is a wildcard, this means it will select all elements within that portion of the DOM.

For example, if I want apply margin to every element on my entire page you can use:

* {
margin: 10px;
}

You can also use this within sub-selections, for example the following would add a margin to all elements within a paragraph tag:

p * {
margin: 10px;
}

Your example is doing some css trickery to apply consecutive borders and margins to elements to give them multiple coloured borders. For example, a white border surrounded by a black border.

小开

* acts as a wildcard, just like in most other instances.

If you do:

*{
margin: 0px;
padding: 0px;
border: 1px solid red;
}

Then all HTML elements will have those styles.

小开

The CSS that you referenced is very useful to a web-designer for debugging page layout problems. I often drop it into the page temporarily so I can see the size of all the page elements and track down, for example, the one that has too much padding which is nudging other elements out of place.

The same trick can be done with just the first line, but the advantage of defining multiple outlines is that you get a visual clue via the border colour to the hierarchy of the nested page elements.

小开

in your stylesheet, usualy you need to define basic rule for all element such as font-size attribute and margins. {font-size:14px; margin:0; padding:0;} / overide browser's default setting on elements, all text font size will be rendered as 14 pixel size with zero margin and padding, including h1,...pre. */


提交答案