Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

CSS Selectors

这篇翻译不完整。请帮忙从英语翻译这篇文章

选择器指示那些元素会被应用上样式。

基本选择器

元素类型选择器
这个基本的选择器选择所有给定的元素名的元素
Syntax: elename
Example: input 将会选择所有的 <input> 元素.
类选择器
这个基本的选择器选择所有含有给定类名的元素
Syntax: .classname
Example: .index 会匹配所有包含 index 类的元素 (类似与有一个类似于这样的属性class="index").
ID选择器
这个基本的选择器会选择所有id属性与之匹配的元素。需要注意的是一个文档中每个id都应该是唯一的。
Syntax: #idname
Example: #toc 将会匹配所有id属性为 toc 的元素 (类似于这样的定义 id="toc").
通用选择器
这个基本选择器选择所有节点。它也常常和一个名词空间配合使用,用来选择该空间下的所有元素。
Syntax: * ns|* *|*
Example: * 将会将会选择所有元素。
属性选择器
这个基本的选择器根据元素的属性来进行选择。
Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Example: [autoplay] 将会选择所有具有 autoplay 属性的元素(不论这个属性的值是什么)

Combinators

Adjacent sibling selectors
The '+' combinator selects nodes that immediately follow the former specified element.
Syntax: A + B
Example: ul + li will match any <li> that immediately follows a <ul>.
General sibling selectors
The '~' combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.
Syntax: A ~ B
Example: p ~ span will match all <span> elements that follow a <p> element inside the same element.
Child selectors
The '>' combinator selects nodes that are direct children of the former specified element.
Syntax: A > B
Example: ul > li will match all <li> elements that are inside a <ul> element.
Descendant selectors
The ' ' combinator selects nodes that are children (not necessary direct children) of the former specified element.
Syntax: A B
Example: div span will match any <span> element that is inside a <div> element.

Pseudo-elements

Pseudo-elements are abstractions of the tree representing entities beyond what HTML does. For example, HTML doesn't have an element describing the first letter or line of a paragraph, or the marker of a list. Pseudo-elements represent these entities and allow CSS rules to be associated with them. that way, these entitities can be styled independently.

Pseudo-classes

Pseudo-classes allow to select elements based on information that is not contained in the document tree like a state or that is particularly complex to extract. E.g. they match if a link has been previously visited or not.

Specifications

Specification Status Comment
Selectors Level 4 Working Draft  
Selectors Level 3 Recommendation  
CSS Level 2 (Revision 1) Recommendation  
CSS Level 1 Recommendation Initial definition

Browser compatibility

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

文档标签和贡献者

 此页面的贡献者: wy-ei
 最后编辑者: wy-ei,