Common selectors in CSS are used to select all elements on the page. Common uses include resetting default margins and padding, applying global box-sizing, and debugging layouts. Care should be taken when using it, and it can be used correctly by selective use, combined with specific selectors, and avoiding nesting in preprocessors; at the same time, it should be paid attention to performance issues, unexpected side effects and better alternatives.

The universal selector * in CSS is a simple but powerful tool. It targets every single element on the page, no matter what tag they use. You won't always see it in everyday stylesheets, but when used wisely (or cautiously), it can help apply broad resets or adjustments across a whole site.

Why would you use * ?

There are a few common reasons developers reach for the universal selector:

• Resetting default margins and paddings — Browsers have built-in styles for elements like headings, paragraphs, lists, etc. Using * lets you quickly zero those out.

  

• Applying global box-sizing — A popular technique is to set box-sizing: border-box on all elements so padding and borders don't push widths out unexpectedly.

• Debugging layouts — Sometimes during development, you might temporarily add a border or background color to everything using * to visualize structure.

  

Just keep in mind that while it's convenient, overusing * can impact performance or accidentally override styles you didn't intend to touch.

How to use it properly

Using * isn't complicated, but it's easy to misuse. Here's how to do it right:

• Use it selectively : Don't just drop * { margin: 0; padding: 0; } without thinking. Some elements might need their default spacing. Consider using a more refined reset like Normalize.css instead.

• Combine with specificity when needed : You can use * as part of more complex selectors. For example, *.highlight would target any element with the class highlight .

• Avoid nesting it in preprocessors : If you're using Sass or Less, avoid putting * inside nested rules. It can create confusing or unintended output.

Here's a quick example:

 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

This snippet is a common starting point for many projects, ensuring consistent sizing and spacing across browsers.

When not to use *

While handy, there are times when you should think twice before using the universal selector:

• Performance concerns — Applying styles to every element can be essential, especially if you're adding heavy transformations or animations.

• Unintended side effects — If you style something like * { color: red; } , even SVGs or hidden elements might pick up that rule unintentionally.

• Better alternatives exist — In most cases, targeting specific tags (like p , h1 , etc.) or using a class-based approach gives you better control and avoids surprises.

So unless you really need a global change, it's often better to be more specific.

That's basically it. The * selector is straightforward but carries some weight — use it where it makes sense, and always double-check how it affects your layout.

The above is the detailed content of What is the universal selector `*`?. For more information, please follow other related articles on the PHP Chinese website!