2

简单的问题，可能反映了我对 CSS 的缺乏经验，但是......

创建样式表时，我喜欢明确指定“*”通配符，因此：

*.TitleText {

而不仅仅是

.TitleText {

我发现它提醒我 TitleText 应用于“任何”标签，并且可以被后续的 h1.TitleText 覆盖。也许我只是喜欢这个，因为很长一段时间以来我都没有正确理解整个 CSS 选择器的概念，当我意识到第二个（上图）只是第一个的简写时，很多东西都“点击”了。

我做的事情是不好的做法，好的做法，还是既不在这里也不在那里？

4

12 回答 12

7

我不知道它是好是坏，但几年来我一直在做 CSS 工作作为 Web 应用程序开发的一部分，而且我从未见过有人使用 * 字符。

于 2008-12-17T22:23:22.707 回答
2

虽然两者在风格结果方面是相同的，但还有一些其他因素需要牢记。

使用*会增加文件大小

如果您不使用删除不需要的星号的 CSS 缩小器（去除不需要的数据，例如额外的空格），*则每次未指定标记时使用会导致文件中出现大量额外字符，这将导致加载时间更长（和更多的带宽使用）。虽然我不会浏览一个大文件并删除已经存在的星号（除非您真的有时间这样做并且喜欢可能导致您多年不会发现的错误的繁琐任务），但我建议不要包括不需要的星号在编写新样式并在编辑旧样式时删除不需要的星号时。

使用*会导致混乱

在不需要时使用*可能会导致混乱，尤其是当新人正在从事该项目并且没有处理在*不需要时出现时（这很常见）。

例子

/** 
 * This matches an element with the class `alert` within
 * any element within an `article` element
 */
article * .alert { /* ... */ }

对比

/** 
 * This matches an element with the class `alert` within
 * an `article` element
 */
article *.alert { /* ... */ }

如果项目中存在 100% 的一致性（并且所有参与项目的人员都知道该风格），那么第一个示例将永远不会发生（article * *.alert取而代之的是）。然而，这是一个理想的情况，并且很可能会在几代开发人员之后分崩离析（人们喜欢使用自己的风格）。因此，即使您有一致的风格，新员工也可能会进来并在短时间内以自己的风格编写，或者错误地阅读当前风格并生成与选择器不匹配的代码（反之亦然）。因此，我建议坚持我在项目和网站中看到最多（阅读：独家）的标准：

如果不需要，请勿使用星号。

快速浏览一些知名网站（例如 Facebook、Google、Yahoo 等）的来源会发现，除非必须（即使是非缩小样式），否则它们不会使用星号。您还可以查看GitHub 上的一些开源项目。

结论

只有在绝对需要时才应使用星号（例如，body * p匹配具有除正文以外的父级的段落）。这不仅是不成文的标准（并且不太可能引起混淆），而且还减小了样式表的文件大小，从而提高了网站的加载速度。

于 2012-02-23T20:59:17.603 回答
1

就个人而言，我倾向于只在将规则应用于所有标签时使用 *。它在 *.class{} 的情况下是多余的，但在 .class *{} 的情况下很有用。

我在几个地方读到了 * 选择器会影响性能，但没有得到验证。除非我需要，否则我不会使用它，因为我通常更喜欢更明确一点，但这只是个人喜好。

于 2008-12-17T22:38:28.493 回答
1

它既不好也不坏，但它（完全）是多余的。

编辑：实际上，我认为这很糟糕，因为它可能会令人困惑（对于人类，而不是解析器）。

于 2008-12-17T22:52:26.280 回答
1

根据CSS规范：

5.3 通用选择器

通用选择器，写成“*”，匹配任何元素类型的名称。它匹配文档树中的任何单个元素。

如果通用选择器不是简单选择器的唯一组件，则可以省略“*”。例如：

  • *[lang=fr]并且[lang=fr]是等价的。
  • *.warning并且.warning是等价的。
  • *#myid并且#myid是等价的。

因此，.TitleText 和 *.TitleText 是等价的。任何实现都不太可能考虑 *.xxx 的性能，而 .xxx 则没有。

这归结为一个风格问题。而且由于其他答案提出的风格考虑似乎在很大程度上没有实际意义，我相信我会继续并继续明确指定 *.

于 2008-12-29T23:06:14.993 回答
0

我认为这并不重要，但我在学习时看到的示例都没有使用这种通配符格式，所以我学会了不用星号。

此外，生成 CSS 的工具都不是这样做的，因此，如果您选择将 CSS 放入此类工具中，则使用星号可能会导致自动化工具清除您的格式。

只是为了与大多数其他 Web 开发人员保持一致，我可能会建议取消星号，这样您就不必与其他开发人员打交道，询问您为什么在此处放置星号。

于 2008-12-17T22:26:14.587 回答
0

我认为 * 是隐含的，所以他们做同样的事情。

我不确定，但如果你这样做可能会导致一些问题：

span.style { color: red; }
*.style { color: blue; }

* 样式可能会覆盖跨度样式。我可能是错的，因为 span.style 是一个更具体的选择器。

我觉得你这样做很有趣，尽管我完全明白为什么！您在 CSS 中使用 DOS 提示符/shell 语法。最后，您可能会以这种方式进一步思考它而感到困惑，因为在 Shell 中您正在查看文件扩展名，但在 CSS 中它实际上映射到一个类。

所以我的意思是，它适用于类选择器，但对于 ID 选择器来说有点失败。例如：

span#id { ... }
*#id { ... }

...而且它不再像 Shell 语法。:) 就我个人而言，我不会像你那样做，因为它可能会让人困惑，但我认为你不会破坏任何东西。

于 2008-12-17T22:37:01.633 回答
0

这将是多余的，假设 * 表示“世界上所有可能的事情”，没有 * 也意味着相同。我通常使用 *{margin:0; undo.css 中的 padding:0} 重置边距和填充，但从不作为伪选择器。

于 2008-12-17T22:46:18.900 回答
0

我从未见过有人像这样使用通配符，我怀疑它会被优先选择而不是仅仅指定类。其他修改样式的人可能会被迫继续使用该语法。那就是如果他们弄清楚为什么他们的课程不工作。

于 2008-12-17T22:47:53.763 回答
0

*.class 将覆盖 span.class 即使 span.class 更重要。

我认为 *.class 没有实际用途，应该使用 !important 语句进行覆盖，并且只进行少量覆盖。

我使用 * 的唯一原因是删除所有填充和边距，实际上我总是这样做，这是我写下的第一个 css 语句:)。

还有相当多的基于“* html”的 css hack 在 IE6 及更低版本中不起作用。

我会将其标记为不良做法。

于 2008-12-17T22:54:41.613 回答
0

就 CSS 规范而言，您的两个示例具有相同的含义。但是，在实践中存在潜在的问题。我所看到的最大的问题是，某些浏览器可能会*在规则权重方面进行不当处理，因此可能会放弃优先级（尽管我不知道有任何浏览器会这样做——它只是不会让我吃惊）。它也被广泛认为，虽然我不能对你引用章节和诗句，但出于性能原因，类选择器应该始终包含特定的标签名称。应用带有标签名称 ( span.foo) 的类选择器显然比没有标签名称 ( ) 更快，并且应用不带标签名称 ( #bar) 的 ID 选择器比带有标签名称更快。

于 2008-12-17T22:59:45.847 回答
-1

编辑：这是指出很可能存在性能问题。有些人似乎认为我是某种在外面咆哮的人......

虽然我不确定，但我想警告一下！考虑以下标识符：

div#foo a.bar {}

例如，我听说使用 css 的 jQuery 在上面的示例中会首先遍历 DOM 寻找 div，然后检查它们是否有 #foo 的 id，然后是 A 标记，最后查看它是否被归类为 .bar .

我对 * 的担心是浏览器可能会遍历 DOM 寻找所有标签，然后寻找 .bar，而不是本质上只是寻找 'bar' 的属性——这是对 DOM 的两次扫描，而不仅仅是一次。可能是一个非常小的差异，但如果你的语法在电波中出现，那就是我们需要安装更多的太阳能电池板。

于 2008-12-17T23:07:08.780 回答