CSS：这个星号 (*) 是做啥的？

Posted 2023-03-06

【中文标题】CSS：这个星号 (*) 是做啥的？

【英文标题】：CSS: What this Asterisk (*) does?CSS：这个星号 (*) 是做什么的？

【发布时间】：2012-02-16 01:34:43

【问题描述】：

这行代码用于Apple.com的导航栏

#globalheader #globalnav[class*="nosearch"]  width:100%; 

有人知道课后的星号是什么意思吗？

【问题讨论】：

和任何地方一样，通配符，小丑。

***.com/questions/5110249/wildcard-in-css

w3.org/TR/selectors/#attribute-substrings

【参考方案1】：

* 与~ 非常相似，但~ 仅与它周围的空格匹配。

例如

foo bar

但不是

foo-bar

* 将匹配两者。

【参考方案2】：

#globalnav[class*="nosearch"]

表示：类包含“nosearch”

---

#globalnav[class^="nosearch"]

表示：类以“nosearch”开头

---

#globalnav[class$="nosearch"]

表示：类以“nosearch”结尾

---

参考： http://reference.sitepoint.com/css/css3attributeselectors

【讨论】：

#globalnav[class*="nosearch"] 与 #globalnav.nosearch 相同。不是吗？

@Dani：不。第一个将包括名称中包含字符串nosearch 的任何类，例如boxnosearch 和nosearchbutton。第二个将仅包括 nosearch 类，没有其他内容。