Use of * selector in style sheet to reset styles

2019-02-19 01:11发布

问题:

At the moment I am just resetting the styles I need at the top of my style-sheet, like:

html, body, div, fieldset, form, h1, h2, h3, h4, p, ul, li {
    margin: 0;
    padding: 0;
}

However, I have seen a lot of times that people use:

* {
    margin: 0;
    padding: 0;
}

That does seem to make things easier, but somewhere else (don´t remember where...) I read that using the * selector seriously affects performance.

Is that true, does a long list of selectors (the example just has a few selectors, it could be more) perform significantly better than the * selector and are there perhaps other disadvantages to the * selector?

回答1:

I once ran some benchmarking and the *{} reset did not run any slower than the resets - Meyers, YUI and no reset at all.

The main problem with the *{} reset is that it resets the padding on the input buttons for most browsers but IE keeps some of its padding making it very hard to consistently style the buttons cross-browser.



回答2:

Why not use one of the standard CSS reset files such as Eric Meyer's or YAHOO's?



回答3:

Via Google's Speed Recommendations, the wildcard selector is very inefficient. Plus, in the future you might have boxes that you don't want to be reset. By naming each one individually, you get both efficiency and control.