第二章 选择器
1、p.warning （没有空格）其class属性包含warning的p段落
区别于 p .warning 选择p标签下子元素包含class=“warning”的元素
2、.warning.urgent{color:red}
选择同时包含这些类名的元素，顺序可变 <div class="urgent warning"> 可以被选择
3、属性选择器
h1[class]{} 选择包含class属性（值不限）的h1元素
*[title]{} 包含title属性的所有元素
a[href][title] 同时具有href和title属性的a标签
planet[moons="1"] 根据属性值选择
<div class="p1 p2">
div[class="p1 p2"] 选择以上div元素，中间要有空格，顺序必须相同。仅使用div[class="p1"]不能选择该元素，要求完全匹配
根据部分属性选择
p[class~="p1"] 选择class带有p1值的元素
子串匹配属性选择器
[foo^="bar"] 选择foo属性以bar开头的所有元素
[foo$="bat"] 选择foo属性以bar结尾的所有元素
[foo*="bar"] 包含foo子串bar的所有元素
特定属性
*[lang|="en"]选择lang属性等于en或以en-开头的所有元素
子选择器`h1 > strong`选择了h1元素的直接子元素 ，即树中直接相连的元素
选择相邻兄弟元素
h1+p{color:red} 紧连在h1元素后的所有p元素，p元素要与h1元素有共同的父元素
伪类和伪元素
链接伪类：
a:link{} 用于未访问的链接 并忽略没有href属性的a标签
a:visited{ } 用于访问过的标签
动态伪类：
：focus 指示当前具有输入焦点的 元素
：hover 指示鼠标指针停留在哪个元素上
：active 指示被用户输入激活的元素 例如鼠标指针停留在一个超链接上，如果用户点击鼠标，就会激活这个超链接，：active将指示这个超链接
常见情况a
a:link{color：navy}
a:visited{ color：gray}
a:hover{ color:red}
a:active{color:yellow}
伪类的顺序按照link-visited-focus-hover-active
选择第一个元素子元素 :first-child
The:first-child represents any element that is the first child element of its parent.
选取其父元素的第一个子元素
<div>
<p>hello</p>
</div>
p:first-child{font-weight:bold} hello变粗
这个不是选择p元素的第一个子元素
伪元素选择器
p:first-letter{} 一个块级元素首字母的样式
p:first-line{} 元素第一行
注意：所有伪元素必须出现在该伪元素选择器的最后面。因此p:first-line em是不合法的
设置之前之后元素的样式
可以用于插入生成的内容，并设置其样式，要在一个元素后面插入内容，可以使用元素after
body:after{ content:"the End"}
