代码之家 › 专栏 › 技术社区 › Qiulang

这个按字母顺序排列的CSS选择器是什么意思?

css-selectors css html

Qiulang · 技术社区 · 8 年前

我经常看到这个按字母顺序排列的CSS选择器。为什么会有人使用这样的选择器?它是从哪里来的?为什么我们不能只用 * selector 全选?

------更新------

在看到2个答案后,问题变成了遗漏了什么元素,即哪些元素不需要规范化?

谢谢。

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas,
caption,center, cite,code, dd, del, details, dfn, div, dl, dt, em,embed, fieldset, figcaption, 
figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, 
kbd, label, legend, li, mark, menu, nav, object, ol, output, p,pre, q, ruby, s, samp, 
section,small, span, strike, strong,sub, summary, sup, table, tbody, td, tfoot, th, thead, 
 time, tr, tt, u, ul, var, video {
    margin:0;
    padding:0;
    border:0;
    font: inherit;
    ...
}

2 回复 | 直到 8 年前

Ehsan 8 年前

这被称为规范化,每个元素在不同的浏览器中可能有属性作为默认值,规范化使浏览器更一致地呈现所有元素。

h1,h2,.....,a {
  my rules;
}

例如, h1...h5 Elemets有一些 margin 作为默认值。我们不想要这个 边缘 为此,请更改它。请参见以下示例:

h1,h2 {
  background-color: orange;
  border: 1px solid;
}

.def {
  margin: 0;
}

Default without change <b>margin</b>.<i>h1</i> and <i>h2</i> have margin as default:
<h1>Default H1</h1>
<h2>Default H2</h2>

Changed:
<h1 class="def">Default H1</h1>
<h2 class="def">Default H2</h2>

* 选择器,选择所有内容,但我们必须选择需要更改其默认属性的元素。

David Ortega 8 年前

此CSS代码通常与CSS框架内的代码相对应,如引导程序,用于规范化和标准化HTML元素的浏览器输出,默认情况下,浏览器呈现引擎为某些元素分配了相关的属性,应用此特定的CSS规则可使页面呈现。r大多数浏览器的输出更加一致。有些浏览器通过渲染引擎呈现一些“错误”或特定行为,而这个CSS样式表旨在修复或“重置”HTML标记的CSS规则。使用的一个非常常见的“重置”CSS组件是normalize.css, you can learn more about it here.

至于为什么不使用*选择器,我认为这是因为并非所有这些修复都对应于所有HTML标记,而且如果HTML规范支持或包含新的HTML标记,将全局样式应用于所有元素可能会使它们行为不正确。希望有人能扩展我的答案,使之更完整。

编辑

由于这个问题引起了我的兴趣,检查universal*选择器是如何将属性分配给css名称空间的,这很有意思,但是旧的/移动浏览器的潜在错误实现可能会导致未知的问题,您可以在此参考“universal selector”的定义。链接:

MSDN definition on Universal Selectors

W3C Definition on Universal Selectors and appliance

Browser implementations of Universal Selectors (检查“已知问题”选项卡)