* CSS 运算符有什么作用？还有其他 CSS 运算符吗？

发布于 2024-12-01 10:30:23 字数 537 浏览 0 评论 0原文

在研究如何从 CSS 中的列表元素构建嵌套表格时，我偶然发现了这个页面： http ://css.maxdesign.com.au/listamatic2/horizontal01.htm。

我注意到样式表使用了一些我在 CSS 中不熟悉的符号，即 > 和 * 符号，它们似乎是某种 CSS 运算符。

例如：

ul#navlist li * a:link, ul#navlist li * a:visited

我在 Google 上发现 > 只是表示两个元素之间的父/子关系，但我仍然不知道 * 的作用。我也很好奇是否还有其他类似的“操作员”，如果有，有人可以指导我参考所有这些操作员吗？

原文

While studying how to build a nested table from list elements in CSS, I stumbled across this page: http://css.maxdesign.com.au/listamatic2/horizontal01.htm.

I noticed that the stylesheet uses a few symbols I'm not familiar with in CSS, namely the > and * symbols as what seem to be some kind of CSS operators.

For example:

ul#navlist li * a:link, ul#navlist li * a:visited

I was able to Google and find out that > simply indicates a parent/child relationship between two elements, but I still have no idea what * does. I'm also curious to know whether or not there are other “operators” like these, and if so, could somebody direct me to a reference of all of them?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

人│生佛魔见 2024-12-08 10:30:23

* 是通用选择器。它选择任何元素。

然而，它是一个简单选择器，因此它不与所谓的组合器属于同一家族（表示两个组合之间的关系）元素）。 > 是子组合器，正如您所说，它定义了两个元素之间的父子关系。

ul#navlist 和 li 之间的空格、li 和 * 等都是后代组合符。与 > 不同的是，空格并不表示父子关系；它只是要求其中包含一个元素，无论它是孩子、孙子、曾孙等，但不是兄弟姐妹。

这两个选择器之间的区别（来自您的链接）：

ul#navlist li > a:link, ul#navlist li > a:visited
ul#navlist li * a:link, ul#navlist li * a:visited

第一个带有 > 的选择器要求 a:link 和 a:访问过的元素
直接位于 ul#navlist li 元素中，

而第二个带有 * 的则要求 a:link 和 a:visited< /code> 元素位于 ul#navlist li 内的任何元素内。换句话说，a:link, a:visited 不直接位于 ul#navlist li 内。

* is the universal selector. It selects any element.

However, it's a simple selector, and as such it doesn't belong in the same family as what are called combinators (which indicate relationships between two elements). > is the child combinator, which as you say defines a parent-child relationship between two elements.

The spaces between ul#navlist and li, li and *, etc are all descendant combinators. Unlike >, the space doesn't indicate a parent-child relationship; it just asks for an element that's contained somewhere within, whether it's a child, grandchild, great-grandchild, etc, but not a sibling.

The difference between these two selectors (from your link):

ul#navlist li > a:link, ul#navlist li > a:visited
ul#navlist li * a:link, ul#navlist li * a:visited

Is that the first one with > asks for a:link and a:visited elements
that sit directly within ul#navlist li elements,

while the second one with * asks for a:link and a:visited elements
that sit within any element that's within ul#navlist li.
In other words, a:link, a:visited that's not directly within ul#navlist li.