📄 selector.html
字号:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Selectors</title><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="syndata.html"><link rel="next" href="cascade.html"><link rel="contents" href="cover.html#minitoc"><link rel="CSS-properties" href="propidx.html" title="properties"><link rel="index" href="indexlist.html" title="index"></head><body><div class="navbar" align="center"><p><a href="syndata.html">previous</a> <a href="cascade.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div><hr class="navbar"><h1 align="center">5 Selectors</h1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="selector.html#q1" class="tocxref">5.1 Pattern matching</a> <li class="tocline2"><a href="selector.html#q2" class="tocxref">5.2 Selector syntax</a> <ul class="toc"> <li class="tocline3"><a href="selector.html#grouping" class="tocxref">5.2.1 Grouping</a> </ul> <li class="tocline2"><a href="selector.html#universal-selector" class="tocxref">5.3 Universal selector</a> <li class="tocline2"><a href="selector.html#type-selectors" class="tocxref">5.4 Type selectors</a> <li class="tocline2"><a href="selector.html#descendant-selectors" class="tocxref">5.5 Descendant selectors</a> <li class="tocline2"><a href="selector.html#child-selectors" class="tocxref">5.6 Child selectors</a> <li class="tocline2"><a href="selector.html#adjacent-selectors" class="tocxref">5.7 Adjacent sibling selectors</a> <li class="tocline2"><a href="selector.html#attribute-selectors" class="tocxref">5.8 Attribute selectors</a> <ul class="toc"> <li class="tocline3"><a href="selector.html#q10" class="tocxref">5.8.1 Matching attributes and attribute values</a> <li class="tocline3"><a href="selector.html#q11" class="tocxref">5.8.2 Default attribute values in DTDs</a> <li class="tocline3"><a href="selector.html#class-html" class="tocxref">5.8.3 Class selectors</a> </ul> <li class="tocline2"><a href="selector.html#id-selectors" class="tocxref">5.9 ID selectors</a> <li class="tocline2"><a href="selector.html#pseudo-elements" class="tocxref">5.10 Pseudo-elements and pseudo-classes</a> <li class="tocline2"><a href="selector.html#q15" class="tocxref">5.11 Pseudo-classes</a> <ul class="toc"> <li class="tocline3"><a href="selector.html#first-child" class="tocxref">5.11.1 :first-child pseudo-class</a> <li class="tocline3"><a href="selector.html#link-pseudo-classes" class="tocxref">5.11.2 The link pseudo-classes: <span class="index-def" title="pseudo-classes:::link|:link|link (pseudo-class)">:link</span> and <span class="index-def" title="pseudo-classes:::visited|:visited|visited (pseudo-class)">:visited</span></a> <li class="tocline3"><a href="selector.html#dynamic-pseudo-classes" class="tocxref">5.11.3 The dynamic pseudo-classes: <span class="index-def" title="pseudo-classes:::hover|:hover|hover (pseudo-class)">:hover</span>, <span class="index-def" title="pseudo-classes:::active|:active|active (pseudo-class)">:active</span>, and <span class="index-def" title="pseudo-classes:::focus|:focus|focus (pseudo-class)">:focus</span></a> <li class="tocline3"><a href="selector.html#lang" class="tocxref">5.11.4 The language pseudo-class: <span class="index-def" title="pseudo-classes:::lang|:lang|lang (pseudo-class)">:lang</span></a> </ul> <li class="tocline2"><a href="selector.html#q20" class="tocxref">5.12 Pseudo-elements</a> <ul class="toc"> <li class="tocline3"><a href="selector.html#first-line-pseudo" class="tocxref">5.12.1 The <span class="index-def" title="pseudo-elements:::first-line|:first-line|first-line">:first-line</span> pseudo-element</a> <li class="tocline3"><a href="selector.html#first-letter" class="tocxref">5.12.2 The <span class="index-def" title="pseudo-elements:::first-letter|:first-letter|first-letter">:first-letter</span> pseudo-element</a> <li class="tocline3"><a href="selector.html#before-and-after" class="tocxref">5.12.3 The <span class="index-def" title="pseudo-elements:::before|:before">:before</span> and <span class="index-def" title="pseudo-elements:::after|:after">:after</span> pseudo-elements</a> </ul> </ul></div><h2><a name="q1">5.1 Pattern matching</a></h2><p>In CSS, pattern matching rules determine which style rules apply toelements in the <a href="conform.html#doctree">documenttree</a>. These patterns, called <a name="x0"><span class="index-inst"title="selector">selectors,</span></a> may range from simple element namesto rich contextual patterns. If all conditions in the pattern are truefor a certain element, the selector <a name="x1"><span class="index-def"title="match|selector::match"><dfn>matches</dfn></span></a> the element.<P>The case-sensitivity of document language element names inselectors depends on the document language. For example, in HTML,element names are case-insensitive, but in XML they arecase-sensitive.<P>The following table summarizes CSS2 selector syntax:</P><table border=1><TR><TH>Pattern<TH>Meaning<TH>Described in section</TR><TR><TD>*<TD>Matches any element.<TD><a href="#universal-selector">Universalselector</a></TR><TR><TD>E<TD>Matches any E element (i.e., an element of type E).<TD><a href="#type-selectors">Typeselectors</a></TR><TR><TD>E F<TD>Matches any F element that is a descendant ofan E element.<TD><a href="#descendant-selectors">Descendantselectors</a></TR><TR><TD>E > F<TD>Matches any F element that is a child ofan element E.<TD><a href="#child-selectors">Child selectors</a></TR><TR><TD>E:first-child<TD>Matches element E when E is the firstchild of its parent.<TD><a href="#first-child">The :first-child pseudo-class</a></TR><TR><TD>E:link<br>E:visited <TD>Matches element E if E is the sourceanchor of a hyperlink of which the target is not yet visited (:link)or already visited (:visited).<TD><a href="#link-pseudo-classes">The link pseudo-classes</a></TR><TR><TD>E:active<br>E:hover<br>E:focus <TD>Matches E during certainuser actions.<TD><a href="#dynamic-pseudo-classes">The dynamic pseudo-classes</a><TR><TD>E:lang(c) <TD>Matches element of type E if it is in (human) language c(the document language specifies how language is determined).<TD><a href="#lang">The :lang() pseudo-class</a><TR><TD>E + F<TD>Matches any F element immediately preceded byan element E.<TD><a href="#adjacent-selectors">Adjacent selectors</a></TR><TR><TD>E[foo]<TD>Matches any E element with the"foo" attribute set (whatever the value).<TD><a href="#attribute-selectors">Attribute selectors</a></TR><TR><TD>E[foo="warning"]<TD>Matches any E element whose"foo" attribute value is exactly equal to "warning".<TD><a href="#attribute-selectors">Attribute selectors</a></TR><TR><TD>E[foo~="warning"]<TD>Matches any E element whose"foo" attribute value is a list of space-separated values, one ofwhich is exactly equal to "warning".<TD><a href="#attribute-selectors">Attribute selectors</a></TR><TR><TD>E[lang|="en"]<TD>Matches any E element whose"lang" attribute has a hyphen-separated list of valuesbeginning (from the left) with "en".<TD><a href="#attribute-selectors">Attribute selectors</a></TR><TR><TD>DIV.warning<TD><em>HTML only</em>. The same as DIV[class~="warning"].<TD><a href="#class-html">Class selectors</a></TR><TR><TD>E#myid<TD>Matches any E element IDequal to "myid".<TD><a href="#id-selectors">ID selectors</a></TR></table><h2><a name="q2">5.2 Selector syntax</a></h2><P>A <span class="index-def" title="simple selector"><aname="simple-selector"><dfn>simple selector</dfn></a></span> is eithera <a href="#type-selectors">type selector</a> or <ahref="#universal-selector">universal selector</a> followed immediatelyby zero or more <a href="#attribute-selectors">attributeselectors</a>, <a href="#id-selectors">ID selectors</a>, or <ahref="#pseudo-classes">pseudo-classes</a>, in any order. The simpleselector matches if all of its components match.<P>A <a name="x4"><span class="index-def"title="selector"><dfn>selector</dfn></span></a> is a chain of one or moresimple selectors separated by combinators. <span class="index-def"title="combinator"><aname="combinator"><dfn>Combinators</dfn></a></span> are: whitespace,">", and "+". Whitespace may appear between a combinator and thesimple selectors around it.<P>The elements of the document tree that match a selector are called<span class="index-def" title="subject (of selector)|selector::subjectof"><a name="subject"><dfn>subjects</dfn></a></span> of the selector.A selector consisting of a single simple selector matches any elementsatisfying its requirements. Prepending a simple selector andcombinator to a chain imposes additional matching constraints, so thesubjects of a selector are always a subset of the elements matchingthe rightmost simple selector.<P>One <a href="#pseudo-elements">pseudo-element</a> may be appendedto the last simple selector in a chain, in which case the styleinformation applies to a subpart of each subject.<h3>5.2.1 <a name="grouping">Grouping</a></h3><p>When several selectors share the same declarations, they may begrouped into a comma-separated list.</p><div class="example"><P style="display:none">Example(s):</P><P>In this example, we condense three rules with identical declarationsinto one. Thus,<pre>H1 { font-family: sans-serif }H2 { font-family: sans-serif }H3 { font-family: sans-serif }</pre><p>is equivalent to:</p><pre>H1, H2, H3 { font-family: sans-serif }</pre></div><P>CSS offers other "shorthand" mechanisms as well, including <span class="index-def" title="multiple declarations"><a name="x8" href="syndata.html#declaration">multiple declarations</a></span>and <span class="index-inst" title="shorthand property"><a name="x9"href="about.html#shorthand">shorthand properties</a></span>.<h2>5.3 <a name="universal-selector">Universal selector</a></h2><P>The <a name="x10"><span class="index-def" title="universal selector">universalselector</span></a>, written "*", matches the name of any elementtype. It matches any single element in the <ahref="conform.html#doctree">document tree.</a><P>If the universal selector is not the only component of a <ahref="#simple-selector">simple selector</a>, the "*" may beomitted. For example:</P><ul><li><code>*[LANG=fr] </code> and <code>[LANG=fr]</code> are equivalent.<li><code>*.warning</code> and <code>.warning</code> are equivalent.<li><code>*#myid</code> and <code>#myid</code> are equivalent.</ul><h2>5.4 <a name="type-selectors">Type selectors</a></h2><p>A <a name="x11"><span class="index-def" title="type selector"><em>typeselector</em></span></a> matches the name of a document language elementtype. A type selector matches every instance of the element type inthe document tree.<div class="example"><P style="display:none">Example(s):</P><P>The following rule matches all H1 elements in thedocument tree:</p><pre>H1 { font-family: sans-serif }</pre></div><h2>5.5 <a name="descendant-selectors">Descendant selectors</a></h2><p>At times, authors may want selectors to match an element that isthe descendant of another element in the document tree (e.g., "Matchthose EM elements that are contained by an H1 element"). <a name="x12"><spanclass="index-def" title="descendant-selectors">Descendantselectors</span></a> express such a relationship in a pattern. Adescendant selector is made up of two or more selectors separated by<a href="syndata.html#whitespace">whitespace</a>. A descendantselector of the form "<code>A B</code>" matches when an element<code>B</code> is an arbitrary descendant of some <ahref="conform.html#doctree">ancestor</a> element <code>A</code>.<div class="example"><P style="display:none">Example(s):</P><p>For example, consider the following rules:</p><pre>H1 { color: red }EM { color: red }</pre><p>Although the intention of these rules is to add emphasis to text bychanging its color, the effect will be lost in a case such as:</p><pre class="html-example"><H1>This headline is <EM>very</EM> important</H1></pre><p>We address this case by supplementing the previous rules with arule that sets the text color to blue whenever an EM occurs anywherewithin an H1:</p><pre>H1 { color: red }EM { color: red }H1 EM { color: blue }</pre><p>The third rule will match the EM in the following fragment:</p><pre class="html-example"><H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1></pre></div><div class="example"><P style="display:none">Example(s):</P><P>The following selector:</p><PRE>DIV * P </PRE><P>matches a P element that is a grandchild or later descendantof a DIV element. Note the whitespace on either side of the "*".</div><div class="example"><P style="display:none">Example(s):</P><p>The selector in the following rule, which combinesdescendant and <a href="#attribute-selectors">attribute selectors</a>,matches any element that (1) has the "href" attribute set and(2) is inside a P that is itself inside a DIV:</p><pre>DIV P *[href]</pre></div><h2>5.6 <a name="child-selectors">Child selectors</a></h2><p>A <a name="x13"><span class="index-def" title="child selector"><em>childselector</em></span></a> matches when an element is the <ahref="conform.html#doctree">child</a> of some element. A childselector is made up of two or more selectors separated by ">".<div class="example"><P style="display:none">Example(s):</P><p>The following rule sets the style of all P elements that are children of BODY:</p><pre>BODY > P { line-height: 1.3 }</pre></div><div class="example"><P style="display:none">Example(s):</P><P>The following example combines descendant selectors and child selectors:</p><pre>DIV OL>LI P</pre><P>It matches a P element that is a descendant of an LI; the LI elementmust be the child of an OL element; the OL element must be adescendant of a DIV. Notice that the optional whitespace aroundthe ">" combinator has been left out.</div>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -