这是来自 David Baron 博客 的转载文章。此功能已加入 Mozilla Central(主干),目前仅在 Firefox Nightly Build 中可用。
昨晚,我完成了对 :-moz-any()
选择器分组的支持。这允许在组合器之间提供备选方案,而不是必须重复整个选择器以改变其中一部分。例如,它允许将我们用户代理样式表中的以下规则
/* 3 deep (or more) unordered lists use a square */
ol ol ul, ol ul ul, ol menu ul, ol dir ul,
ol ol menu, ol ul menu, ol menu menu, ol dir menu,
ol ol dir, ol ul dir, ol menu dir, ol dir dir,
ul ol ul, ul ul ul, ul menu ul, ul dir ul,
ul ol menu, ul ul menu, ul menu menu, ul dir menu,
ul ol dir, ul ul dir, ul menu dir, ul dir dir,
menu ol ul, menu ul ul, menu menu ul, menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir, menu ul dir, menu menu dir, menu dir dir,
dir ol ul, dir ul ul, dir menu ul, dir dir ul,
dir ol menu, dir ul menu, dir menu menu, dir dir menu,
dir ol dir, dir ul dir, dir menu dir, dir dir dir {
list-style-type: square;
}
替换为以下规则
/* 3 deep (or more) unordered lists use a square */
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
list-style-type: square;
}
理论上,我甚至可以使用
/* 3 deep (or more) unordered lists use a square */
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
list-style-type: square;
}
但这样做会更慢,因为它不再属于 标签桶。(如果 :-moz-any()
变得流行,我们可以添加额外的代码使其同样快,但我还没有这样做。)
:-moz-any()
允许包含包含多个简单选择器的选择器(使用 css3-selectors 对简单选择器的定义,而不是 CSS 2.1 的定义),但不允许包含组合器或伪元素。因此,您可以编写 :-moz-any(p.warning.new, p.error, div#topnotice)
或 :-moz-any(:link, :visited).external:-moz-any(:active, :focus)
,但不能在 :-moz-any()
中放入“div p
”或“div > p
或“:first-letter
”。
使用 -moz- 前缀有两个原因。首先,它只是一个提案,还没有进入任何规范。其次,它还没有完全准备好投入使用,因为它还没有 正确处理特异性。
注意:在 HTML5 上下文中,当涉及到部分和标题时,这将非常有用。由于 section
、article
、aside
和 nav
可以嵌套,因此对不同深度的所有 h1
元素进行样式化可能会非常复杂。
/* Level 0 */
h1 {
font-size: 30px;
}
/* Level 1 */
section h1, article h1, aside h1, nav h1 {
font-size: 25px;
}
/* Level 2 */
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
font-size: 20px;
}
/* Level 3 */
/* ... don't even think about it*/
使用 -moz-any()
/* Level 0 */
h1 {
font-size: 30px;
}
/* Level 1 */
-moz-any(section, article, aside, nav) h1 {
font-size: 25px;
}
/* Level 2 */
-moz-any(section, article, aside, nav)
-moz-any(section, article, aside, nav) h1 {
font-size: 20px;
}
/* Level 3 */
-moz-any(section, article, aside, nav)
-moz-any(section, article, aside, nav)
-moz-any(section, article, aside, nav) h1 {
font-size: 15px;
}
关于 Paul Rouget
Paul 是 Firefox 开发人员。
27 条评论