Selector概述
示例：
strong {
color: red;
}
解释：
这是一个完整 css 规则（标签选择器）。
strong 叫做选择器，它选择该规则将被应用到 DOM 的那个元素上去。
{} 里面的部分是声明，包含多条规则。每一条规则以 `;` 隔开。
color 为关键字。
red 为关键字的值。
除了标签选择器，还有其它类别的选择器。分为基本选择器、关系选择器、伪类选择器、伪元素选择器。
基本选择器：
| [E] | 标签选择器 | strong {} | 选择使用 <strong> 标签的元素 |
| id | id选择器(属性选择器) | #1111 {} | 选择 id = "1111" 的元素 |
|
class |
class选择器(属性选择器) | .books {} |
选择 class = "books" 的元素 |
|
* |
所有元素 | * {} | 所有元素 |
示例：
HTML：
<p class="key" id="principal">
CSS：
* {
background: red;
}
p {
font-size: 30px;
}
.key {
color: green;
}
#principal {
font-weight: bolder;
}
属性选择器：
[attr]
选择具有 "attr" 属性的元素。
[attr=value]
选择具有 attr 属性, 属性值为 "value" 的元素。
[attr~=value]
选择具有 attr 属性, 属性值包含单词 "value" 的元素。
[attr|=value]
选择具有 attr 属性, 属性值为 "value" 或者为 "value-xxx"的元素, 常用于语言属性的选择(lang="en_us")。
[attr^=value]
选择具有 attr 属性, 属性值以 "value" 作为前缀的元素。
[attr$=value]
选择具有 attr 属性, 属性值以 "value" 作为后缀的元素。
[attr*=value]
选择具有 attr 属性, 属性值以中包含有 "value" 值的元素。
[attr operator value i]
在结尾方括号(])前添加 ! ,使得 "value" 的匹配忽略大小写。
示例：
HTML：
<div class="hello-example">
<a href="http://example.com">English:</a>
<span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="hello-example">
<a href="#portuguese">Portuguese:</a>
<span lang="pt">Olá Mundo!</span>
</div>
<div class="hello-example">
<a href="http://example.cn">Chinese (Simplified):</a>
<span lang="zh-CN">世界您好！</span>
</div>
<div class="hello-example">
<a href="http://example.cn">Chinese (Traditional):</a>
<span lang="zh-TW">世界您好！</span>
</div>
CSS：
/* All spans with a "lang" attribute are bold */
span[lang] {font-weight:bold;} /* All spans in Portuguese are green */
span[lang="pt"] {color:green;} /* All spans in US English are blue */
span[lang~="en-us"] {color: blue;} /* Any span in Chinese is red, matches
simplified (zh-CN) or traditional (zh-TW) */
span[lang|="zh"] {color: red;} /* All internal links have a gold background */
a[href^="#"] {background-color:gold} /* All links to urls ending in ".cn" are red */
a[href$=".cn"] {color: red;} /* All links with "example" in the url have a grey background */
a[href*="example"] {background-color: #CCCCCC;} /* All email inputs have a blue border */
/* This matches any capitalization of
"email", e.g. "email", "EMAIL", "eMaIL", etc. */
input[type="email" i] {border-color: blue;}
关系选择器：
| B + E | 选择 E 元素, E 为元素 B 的下一个兄弟元素 |
| E:first-child | 选择 E 元素, E 为其父元素的第一个子元素 |
| A > E | 选择 E 元素, E 为 A 元素的子元素 |
| A E | 选择 E 元素, E 为 A 元素的后代元素 |
示例：
HTML：
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul> <div>
<span>Span 1. In the div.
<span>Span 2. In the span that's in the div.</span>
</span>
</div>
<span>Span 3. Not in a div at all.</span> <ul>
<li>
<div>Item 1</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
<li>
<div>Item 2</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
</ul> <span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>
CSS：
li:first-of-type + li {
color: red;
}
span { background-color: white; }
div > span {
background-color: DodgerBlue;
}
li { list-style-type: disc; }
li li { list-style-type: circle; }
p + span {
color: red;
}