选择器 <div><h2>AnH2</h2><p>Thisisparagraph</p><p>Paragraph2has<ahref="#">alink</a></p><ahref="#">Link<
选择器
<div> <h2>An H2</h2> <p>This is paragraph</p> <p>Paragraph 2 has <a href="#">a link</a></p> <a href="#">Link</a></div>子选择符：div>a ； 结果：<a>Link</a>，意思是只能选中所有的儿子，而不包括所有的孙子
紧邻同胞选择符：h2+p ；结果：<p>This is paragraph</p>
一般同胞选择器：h2~a；结果：<a>Link</a>，选中在 h2 之后的兄弟（同辈元素）,在 h2 之前的 a 是不会被选中的
通用选择器：div * a；结果<a>a link</a>，选中 div 的孙子 a
属性选择符：a[href] 选中 a 标签有 href 属性的
a[href="#"] 选中 a 标签 href 属性为#的
伪类
分为两种：1、UI 伪类，某种状态，例如 a 鼠标悬停；2、结构化伪类，例如某组元素第一个或最后一个
UI 伪类；一个冒号 : 表示伪类，两个冒号 :: 表示 CSS3 新增的伪类
链接伪类，如果需要使用多个，尽量按照 l v h a 的顺序：
a:link 普通状态，等待被点击
a:visited 已经点击过（访问过）
a:hover 鼠标悬停
a:active 正在被点击，鼠标按下的状态
:focus 伪类，获得元素焦点时，input:focus{border:2px solid #444;}
:target，例：
#more_info:target{background:#eee;}
<h2 id="more_info">This is the information you are looking for.</h2>
当浏览器的链接为 smartisan.com#more_info 时，则h2的背景则会变成 #eee
结构化伪类：
:first-child :last-child
li:first-child 选中的是 li 组中的第一个 li，而不是 li 的第一个孩子
nth-child
li:nth-child(2) 选中第二个 li，计数不是从0开始的
li:nth-child(odd) 奇数列，li:nth-child(event) 偶数列
伪元素，！伪元素的信息不会被搜索引擎获得
p::first-letter{font-size:200%;} 将 p 中的第一个字符选中，效果：abc
p::first-line{font-variant:samll-caps;} 将 p 中的第一行全变为大写，不同浏览器尺寸第一行都是不一样的
::before ::after
<p class="age">24</p>
p.age::before{content:"Age: ";}
p.age::after{content:" years."}
结果：Age: 24 years.
