Use the asterisk (*) wildcard character in CSS for a summary

This article describes a summary of using the asterisk (*) wildcard character in CSS sparingly

The use of wildcards is mentioned in the article on CSS3 (if you are interested in using selectors in CSS3, refer to the attribute selector in the detailed CSS3 of my translation). There are several ways to use the characters in CSS3, such as an asterisk (*), a caret (^), and a dollar sign ($). Since the asterisk (*) has been supported by most browsers in css2.x, it has the widest range of uses.

The most common way to use asterisks (*) is:

The code is as follows:

* {padding:0;margin:0;font-family: ...}

This approach is useful because different browsers have different default styles for the same page elements, so it is necessary to use the wildcard asterisk number (*) to unify all the default styles that might affect the layout. The asterisk (*) matches all elements, eliminating the hassle of having to write an element name.

I believe there should be a lot of people using this method. Dudo Blog topic before the text is not under the browser font is not uniform, so I use the asterisk (*) wildcard character to achieve this effect.

But...... Can this method really let us once and for all? Let's look at an example. Here is a multi-layered set of XHTML code (I think this is much less than the number of nesting in the actual application):

The code is as follows:

<p id= "D1" > <p id= "d2" > <p id= "d3" > <p id= "D4" > <p id= "d5" > <p>jb51.net</p> < ;/p> </p> </p> </p> </p>

The CSS code I'm using is simple:

The code is as follows:

* {color:red;}

The effect in the browser is to display the dudo.org string as red. Then we'll use the developer tools that come with the Chrome browser to see how the browser renders:

On the right we see that from the HTML tag to the P#D1 the last to the p#d5 are given a color:red attribute. This means that blank elements also have attributes. Some might say, it's normal, because you're using the asterisk (*), and the asterisk (*) naturally matches all the labels. but you should take a closer look at the front "inherited Frome", which is not only specified by an asterisk (*), but also inherits a layer after another. and the asterisk (*) has a high priority, and he has a large scope. As a result, the more complex your page hierarchy, the more times you can repeat the inheritance and rendering.

What kind of consequences will it have? Impact Performance! However, this is not the age of 296, 386, now the computer for the point is simply a side dish, if you do not care so much can be ignored. But for demanding designs, such things are definitely not allowed to happen.

so is the asterisk (*) wildcard not going to work, or is the less you use the better? Of course not! but stick to this principle: don't use it in a deep-seated page structure; Do not use it on the root node of the page; Do not use it on nodes that are farther from the target node . It is best to use it in the parent element. This effect and performance can be combined.

There may have been a similar discussion before, but I did not find the relevant details of the article, you are welcome to advise.

Wildcards are supported in CSS2, and if you have only two or three layers, it's convenient to use asterisks (*), and there's a problem with more nesting.