Things It Might Be Fun/Useful to Try the Universal (*) Selector On

最新推荐文章于 2022-02-28 11:18:34 发布

load_life

最新推荐文章于 2022-02-28 11:18:34 发布

阅读量408

点赞数

分类专栏： CSS3 文章标签： alignment transition properties performance wordpress browser

CSS3 专栏收录该内容

97 篇文章

订阅专栏

本文探讨了如何使用CSS的通用选择器(*)为页面上的所有元素设置样式属性，包括过渡效果、背景重复、定位方式及垂直居中等，旨在通过简化CSS规则提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Paul Irish recently wrote a post on using the universal selector to set border-box box-sizing on everything:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

I've been wanting to try that for a while and I'm happy to say I've used it on a few projects already and it's awesome. It also got my thinking what other properties might be similarly useful in applying to all elements on the page.

Transitions

* {
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}

If you're on a desktop browser, try it out right now. Open your browsers dev tools and add a new CSS rule. I happen to be in Chrome so:

I just tried in in the WordPress dashboard where I'm writing this and it's pretty wacky fun, especially in the side navigation. Performance could certainly be a concern here, so I'm not exactly advocating it's use right now, but it's fun to play with. When everything on the page has a quick and equal transition, I find it a nice, softened, comforting feel.

Non-Repeating Backgrounds

I bet overall you tell backgrounds to no-repeat more often than you actually leave them repeating.

* {
  background-repeat: no-repeat;
}

That way you can do:

.logo {
  background-image: url(logo.png);
}

Without worrying that the image you've set will repeat and be weird if the container is slightly bigger than the logo. And you also don't have to use the shorthand for background, which sets/resets background-color,background-attachment, and background-position whether you want it to or not.

I know Estelle Weyl is a fan =)

Relative Positioning

* {
  position: relative;
}

If everything starts out with relative positioning, that means z-index "just works" instead of the confusing issue where default statically positioned elements ignore it. It also means it's easier to nudge things around with top,left, right, and bottom which all "just work" on relatively positioned elements. It might be hard to apply this to an existing layout but starting from scratch with this shouldn't be too hard.

Middle Alignment

* {
  vertical-align: middle;
}

I find myself setting this value a lot, espeically on projects that use icons. It doesn't affect much on most layouts I tried applying it on, as it only really comes up when inline or inline-block elements line up with each other on the same line. Essentially, I find myself setting this more than resetting a default, which I think makes it a good candidate for universal settage.

Things It Might Be Fun/Useful to Try the Universal (*) Selector On is a post from CSS-Tricks