css 选择器学习笔记

网站链接：

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

更多Jerry的原创文章，尽在：“汪子熙”: