CSS参考手册
选择 | Selectors
CSS选择器 | CSS Selectors
CSS选择器表示被设定了一组特定的CSS规则的元素。
基本选择器
类型选择器选择与给定节点名称匹配的所有元素。
语法:eltname
示例:input
将匹配任何<input>
元素。类选择器选择具有给定class
属性的所有元素。
语法:.classname
示例:.index
将匹配具有“index”类的任何元素。
ID选择器根据其id
属性的值选择元素。文档中每个ID都应该是唯一的。
语法:#idname
示例:#toc
将匹配具有ID“toc”的元素.Universal 选择器选择所有元素。也可以将其限制在特定的名字空间或所有名字空间中。
句法:*ns|**|*
示例:*
将匹配文档的所有元素。属性选择器根据给定属性的值选择元素。
语法:[attr][attr=value][attr~=value][attr|=value][attr^=value][attr$=value][attr*=value]
例如:[autoplay]
将匹配所有设置了autoplay
属性的元素(任意值)。
组合因子
相邻兄弟选择器:+
组合因子选择相邻的同胞元素。这意味着第二个元素直接紧跟第一个元素,并且共享同一个父元素。
语法:A + B
示例:h2 + p
将匹配所有直接跟随一个<h2>
的元素<p>
元素。后续兄弟选择器:~
组合因子选择同胞元素。这意味着第二个元素跟随在第一个元素之后(尽管不一定紧跟其后),且都共享同一个父元素。
语法:A ~ B
示例:p ~ span
将匹配<p>
之后的所有<span>
元素。子元素选择器:该组合因子>
选择第一个元素的直接子元素节点。
语法:A > B
示例:ul > li
将匹配直接嵌套在<ul>
元素内的所有<li>
元素。后代选择器:该组合因子选择作为第一个元素的后代的节点。
语法:A B
例子:div span
将匹配<div>
元素中的所有<span>
元素。
伪类
伪类允许基于不存在于文档树中的状态信息来选择元素。
例如: a:visited
将匹配用户访问过的所有<a>
元素。
伪素
伪素表示不包含在HTML中的实体。
例如: p::first-line
将匹配所有<p>
元素的第一行。
规范
Specification |
Status |
Comment |
---|---|---|
Selectors Level 4 |
Working Draft |
|
Selectors Level 3 |
Recommendation |
|
CSS Level 2 (Revision 1) |
Recommendation |
|
CSS Level 1 |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|
Basic support |
1 |
1.0 (1.7 or earlier) |
3.0 |
3.5 |
1.0 |
Feature |
Android |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|
Basic support |
1.5 |
1.0 (1.9.2) |
? |
? |
3.2 |
选择 | Selectors相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。