非常教程

CSS参考手册

选择 | Selectors

:any

这是一项实验技术

由于该技术的规范尚未稳定,请查看各浏览器的兼容性表格来查看用法。另外还需注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

:any()伪类可以创建一个包含多个选项的选择器,满足其中的任何一个选项的对象都将被匹配。对于相似对象的选择,它不用反复多次的构建多个选择器,因此是一个很好的选择。

/* Select any h2 inside a section, article, aside, or nav */
/* Currently supported with -moz- and -webkit- prefixes */
:-moz-any(section, article, aside, nav) h2 {
  font-size: 4.5rem;
}

:-webkit-any(section, article, aside, nav) h2 {
  font-size: 4.5rem;
}

注意:这个伪类正在CSS Selectors Level 4:matches()的名字进行标准化。它的语法和名称很可能会在不久的将来发生变化。

语法

形式语法

:-moz-any( <selector># )
:-webkit-any( <selector># )

selector选择器。这可能是一个简单的选择器或由CSS 3简单的选择器组成的多重选择器,也可能包括后代的组合器。

注意:选择器可能包含伪元素,并且允许的唯一组合器是后代组合器。

实例

例如,以下CSS:

/* 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;
}

但是,请不要使用以下内容:(请参阅下面的性能部分。)

:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
  list-style-type: square;
}

笔记

在处理HTML5 部分和标题时,此属性特别有用。因为<section><article><aside>,和<nav>可以嵌套,而没有:any(),要给这些元素设置彼此匹配的样式是比较棘手的。

例如,如果没有:any(),给所有处于不同深度的<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*/

但是:-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;
}

性能和特性问题

错误561154跟踪了Gecko的特殊性:-moz-any()不正确的问题。目前(从Firefox 12开始)的实现将:-moz-any()放入了通用规则中,这意味着使用它作为最右边的选择器比使用ID,类或标签作为最右边的选择器要慢。

例如:

.a > :-moz-any(.b, .c)

慢于:

.a > .b, .a > .c

以下更快:

:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c

浏览器兼容性

Feature

Firefox (Gecko)

Chrome

Internet Explorer

Opera

Safari

Basic support

4.0 (2)-moz

12.0 (534.30)-webkit

?

?

5 -webkit

Feature

Android

Chrome for Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

?

(Yes)-webkit

?

?

?

5 -webkit

CSS

层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS目录

1.动画和转换 | Animations & Transitions
2.背景和边框 | Backgrounds & Borders
3.基本框模型 | Basic Box Model
4.基本用户界面 | Basic User Interface
5.框对齐 | Box Alignment
6. 级联和继承 | Cascading & Inheritance
7.颜色 | Color
8. 合成与混合 | Compositing & Blending
9.条件和规则 | Conditional Rules
10.计数器样式 | Counter Styles
11.设备适配 | Device Adaptation
12.扩展 | Extensions
13.滤镜效果 | Filter Effects
14.灵活的框布局 | Flexible Box Layout
15.字体 | Fonts
16.片段模块 | Fragmentation
17.全屏 API | Fullscreen API
18. 生成内容 | Generated Content
19.网格布局 | Grid Layout
20.图像值 | Image Values
21.初始线格局 | Inline Layout
22.列表和计数器 | Lists & Counters
23.逻辑属性 | Logical Properties
24.面具 | Masking
25.媒体查询 | Media Queries
26.杂项 | Miscellaneous
27.Miscellaneous Level 1
28.Miscellaneous Level 2
29.运动路径 | Motion Path
30. 多列布局 | Multi-column Layout
31.命名空间 | Namespaces
32.项目模型 | Object Model View
33.网页媒体 | Paged Media
34.定位布局 | Positioned Layout
35.伪元素 | Pseudo-
36.节奏大小 | Rhythmic Sizing
37. Ruby布局 | Ruby Layout
38.可缩放矢量图形 | Scalable Vector Graphics
39.滚动快照 | Scroll Snap
40.选择 | Selectors
41.形状 | Shapes
42.文本 | Text
43.文字装饰 | Text Decoration
44.变换 | Transforms
45.值和单位 | Values & Units
46.变量 | Variables
47.写入模型 | Writing Modes
48.CSS 教程
49.CSS 创建
50.CSS Id 和 Class选择器
51.CSS 简介
52.CSS 盒子模型
53.CSS Table(表格)
54.CSS 列表样式(ul)
55.CSS 链接(link)
56.CSS Fonts(字体)
57.CSS Text(文本)
58.CSS Backgrounds(背景)
59.CSS Display(显示) 与 Visibility(可见性)
60.CSS 尺寸 (Dimension)
61.CSS 分组和嵌套
62.CSS 轮廓(outline)属性
63.CSS Border(边框)
64.CSS 图像透明/不透明
65.CSS 导航栏
66.CSS 伪元素
67.CSS 伪类
68.CSS Float(浮动)
69.CSS Position(定位)
70.CSS 总结
71.CSS 属性选择器
72.CSS 媒体类型
73.CSS 图像拼合技术
74.CSS 实例
75.CSS 组合选择符
76.响应式 Web 设计 – 框架
77.响应式 Web 设计 – 视频(Video)
78.CSS 提示工具(Tooltip)
79.CSS 布局 Overflow
80.CSS 计数器
81.CSS 表单