網站連結：
https://www.w3.org/TR/CSS21/selector.html
CSS支援的所有選擇器：
選擇器 grouping
當幾個選擇器共享同一部分屬性時，選擇器可以放到同一組裡。
下列兩種css定義等價：
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
h1, h2, h3 { font-family: sans-serif }
Universal selector
If the universal selector is not the only component of a simple selector, the “*” may be omitted.
下列這些css定義是等價的：
- *[lang=fr] and [lang=fr] are equivalent.
- *.warning and .warning are equivalent.
- *#myid and #myid are equivalent.
Descendant selectors
<html>
<style>
p {
color: red;
}
div p {
color: blue;
}
</style>
<p>Parent p</p>
<div>
<span>1</span>
<span>2</span>
</div>
<div id = "jerry" actions tool="spa">
<p>3</p>
<p>4</p>
</div>
</html>
嵌套在div裡的p變成了藍色。
descendent 選擇器和屬性選擇器搭配工作：
div p *[href] {
color: blue;
}
比對在div和p嵌套中的任意元素，且這些元素要包含href屬性。
Child selectors
比對直接子節點。
<html>
<style>
div>p {
color: red;
}
div p *[href] {
color: blue;
}
</style>
<p>Parent p</p>
<div>
<span>1</span>
<span>2</span>
</div>
<div id = "jerry" actions tool="spa">
<p href="1">
<span href="2">inside p </span>
</p>
<p>4</p>
</div>
</html>
必須是div的直接子節點p才行：
Adjacent sibling selectors
Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).
例子：
p + div {
color: green;
}
修飾的是 + 号後面的div節點：
attribute selector
分為以下四種：
- [att]
Match when the element sets the “att” attribute, whatever the value of the attribute.
-
[att=val]
Match when the element’s “att” attribute value is exactly “val”.
-
[att~=val]
Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly “val”. If “val” contains white space, it will never represent anything (since the words are separated by spaces). If “val” is the empty string, it will never represent anything either.
-
[att|=val]
Represents an element with the att attribute, its value either being exactly “val” or beginning with “val” immediately followed by “-” (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class.
<html>
<style>
div[att] {
color: blue;
}
div[att=red] {
color: red;
}
div[att~=green] {
color: green;
}
div[att|=lime] {
color: lime;
}
</style>
<div att>
attribute
</div>
<div att="red">
red
</div>
<div att="red green">
green
</div>
<div att="lime">
lime
</div>
<div att="lime-jerry">
lime-Jerry
</div>
</html>
效果：
另一個例子：
The following rule will match for values of the “lang” attribute that begin with “en”, including “en”, “en-US”, and “en-cockney”:
*[lang|="en"] { color : red }
class 選擇器
class選擇器和attribute選擇器可以互換：
<html>
<style>
div.title{
color: blue;
}
div[class='red'] {
color: red;
}
div.green {
color: green;
}
</style>
<div class='title'>
title
</div>
<div class='red'>
red
</div>
<div class=green>
green
</div>
</html>
div.green.red {
color: lime;
}
如果出現多個., 這些由多個.連接配接起來的class名稱是AND的關系，即必須同時包含這些class才比對：
- Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document (e.g., the :before and :after pseudo-elements give access to generated content).
- Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exceptions are ‘:first-child’, which can be deduced from the document tree, and ‘:lang()’, which can be deduced from the document tree in some cases.
Neither pseudo-elements nor pseudo-classes appear in the document source or document tree. 二者都不會出現在document tree裡。
<html>
<style>
div > p:first-child { color: red; }
</style>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</html>
:hover, :active, and :focus
如果a标簽沒有href屬性，則無法接受hover或者focus事件：
<html>
<style>
a:focus { color: yellow }
a:focus:hover { color: red }
</style>
<div>
<a >1</a>
<a >2</a>
</div>
</html>
點選tab鍵無法focus：
加上href屬性後：
上圖是focus屬性激活的外觀，color：yellow
滑鼠放上去後，激活hover，color：red