CSS3基础——选择器（基于w3c school）

1. 属性选择器
   [abc^=“def”] 选择 abc 属性值以 “def” 开头的所有元素
   [abc$=“def”] 选择 abc 属性值以 “def” 结尾的所有元素
   [abc*=“def”] 选择 abc 属性值中包含子串 “def” 的所有元素

2. :root 选择器匹配文档根元素。
   在 HTML 中，根元素始终是 html 元素。

3. 结构性伪类选择器
   not：选择除某个元素之外的所有元素
   empty：用来选择没有任何内容的元素（注意：空格不为空）
   target：匹配文档(页面)的url的某个标志符的目标元素
   first-child:定位列表中的第一个列表项
   last-child:元素的最后一个子元素
   nth-child(n):定位某个父元素的一个或多个特定的子元素, 可以传参数
   nth-last-child(n)：倒数

<style> 
#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
 content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
    content for aron
</
div>

4. first-of-type选择器，last-of-type选择器，nth-of-type(n)选择器，nth-last-of-type(n)：定位一个父元素下的某个类型的子元素。
5. only-child选择器：父元素中只有一个子元素，而且只有唯一的一个子元素。
6. only-of-type：父元素的唯一一个相同类型的子元素。（就你绕）
7. enabled选择器：选择都处在可用状态的表单元素
8. disabled选择器：选择不可用表单元素
9. checked选择器：配合其他标签实现自定义样式
10. ::selection选择器 ：匹配突出显示的文本(用鼠标选择文本时的文本)
11. read-only选择器：处于只读状态元素的样式
12. read-write选择器：指定当元素处于非只读状态时的样式
13. ::before和::after：多用于清除浮动流

 ::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}