这篇翻译不完整。请帮忙从英语翻译这篇文章。
选择器指示那些元素会被应用上样式。
基本选择器
- 元素类型选择器
- 这个基本的选择器选择所有给定的元素名的元素
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 |