CSS选择器样式

Question

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

创建样式表时，我喜欢明确指定'*'外卡，所以：

*.TitleText {

而不仅仅是

.TitleText {

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

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

Answer 1

我不知道它是好还是坏，但我已经做了几年的Web应用程序开发的CSS工作，而且我从未看到有人使用*字符。

Answer 2

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

使用*会增加文件大小

如果你不使用CSS minifier（删除不必要的数据，如额外的空格）来删除不需要的星号，每次没有指定标记时使用*会导致相当多的额外字符。文件将导致更长的加载时间（和更多的带宽使用）。虽然我不会通过一个大文件并删除已经存在的星号（除非你真的有时间这样做并且喜欢可能导致你多年不会发现的错误的乏味任务），我建议不要包括不需要的星号在编辑旧样式时编写新样式并删除不需要的星号。

使用*会导致混淆

在不需要时使用*可能会导致混淆，特别是当有新人正在处理项目并且在不需要时没有处理*时（这很常见）。 / p>

实施例

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

的 VS 的

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

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

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

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

结论

只有在绝对需要的情况下才能使用星号（例如，body * p匹配父母不是正文的段落）。这不仅是不成文的标准（并且不太可能引起混淆），但它也减少了样式表的文件大小，从而提高了网站的加载速度。

Answer 3

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

我已经在一些地方读过，但未经验证，*选择器会影响性能。这不是我使用的东西，除非我需要，因为我通常更喜欢更明确，但这只是个人偏好。

Answer 4

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

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

Answer 5

根据CSS规范：

  

5.3通用选择器

     

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

     

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

     

  
• *[lang=fr]和[lang=fr]相同。
  
• *.warning和.warning相同。
  
• *#myid和#myid相同。
  

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

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

Answer 6

我认为这不重要，但我学习时所见的所有例子都没有使用那种外卡格式，所以我学会了没有星号。

此外，没有一个生成CSS的工具会这样做，所以通过使用星号，如果您选择将CSS放入这样的工具中，那么冒着自动化工具的风险就会使您的格式消失。

为了与大多数其他网络开发人员保持一致，我可能会建议取消使用星号，这样您就不必与其他开发人员打交道，询问为什么要在那里添加星号。

Answer 7

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

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

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

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

我觉得你这样做很有意思，即使我完全明白了！你在CSS中使用DOS提示符/ shell语法。最后你可能会让自己进一步混淆思考，因为在Shell中你正在查看文件扩展名，但在CSS中它实际上是映射到一个类。

所以我的意思是，它适用于类选择器，但对于ID选择器来说却是一种挫折。例如：

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

...它不再像Shell语法一样。 :)我个人不会这样做，因为它可能会令人困惑，但我认为你没有破坏任何东西。

Answer 8

这将是多余的，假设*意味着'世界上所有可能的东西'没有*也意味着相同。我通常使用* {margin：0;在undo.css中填充：0}以重置边距和填充，但从不作为伪选择器。

Answer 9

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

Answer 10

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

我认为* .class没有实际用途，覆盖应该用！important语句完成，只能用稀疏。

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

还有不少基于“* html”的css hacks无法在IE6及更低版本中运行。

我认为这是不好的做法。

Answer 11

就CSS规范而言，您的两个示例具有相同的含义。但是，在实践中存在潜在的问题。我能看到的最大的问题是，某些浏览器可能会在规则权重方面误导*，因此可能会抛弃优先权（尽管我不知道有什么，但最重要的是，这样做 - 它不会让我感到惊讶）。它也被广泛认为，尽管我不能引用你的章节，因为性能原因，类选择器应该总是包含一个特定的标签名称。应用具有标记名称（span.foo）的类选择器显然比使用标记名称#bar而不是更快更快地应用没有标记名称（{{1}}）的ID选择器而不是。

Answer 12

编辑：这表明可能存在性能问题。有些人似乎认为我在那里咆哮......

---

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

div#foo a.bar {}

我听说jQuery例如利用css，在上面的例子中将遍历DOM首先查找div，然后检查他们是否有#foo的id，然后查看A标签，最后看到它是否是分类.bar。

我对*的关注是浏览器可能遍历DOM寻找所有标签然后寻找.bar，而不是固有地只是寻找'bar'的属性 - 这是DOM的两次扫描，而不仅仅是一。可能是一个极小的差异，但如果你的语法遇到电波，我们需要安装更多的太阳能电池板。