MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

选择器定义了哪些元素会应用一系列CSS规则。

基本选择器

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

Combinators

紧邻兄弟选择器
The '+' combinator selects nodes that immediately follow the former specified element.
语法: A + B
例子: ul + li will match any <li> that immediately follows a <ul>.
一般兄弟选择器
The '~' combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.
语法: A ~ B
例子: p ~ span will match all <span> elements that follow a <p> element inside the same element.
子选择器
The '>' combinator selects nodes that are direct children of the former specified element.
语法: A > B
例子: ul > li will match all <li> elements that are inside a <ul> element.
后代选择器
The ' ' combinator selects nodes that are children (not necessary direct children) of the former specified element.
语法: A B
例子: div span will match any <span> element that is inside a <div> element.

 伪元素

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 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

浏览器兼容性

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

文档标签和贡献者

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