类选择器
选择p标签中class属性包含class1和class2的，注意没有空格
p.class1.class2{...}
属性选择
.demo[name] 选择含有name属性的demo类
h1#page-title
h1[id="page-title"]
上述存在差别
img[title~="myimg"]//~=为部分匹配选择
这种匹配要求属性与值完全匹配，也就是说值被引号所包括，在html标签中有空格的出现的话，那么css选择器也必须具有
子串匹配选择器
[foo^="bar"] 选中foo属性以bar开头的元素
[foo$="bar"] 选中foo属性以bar结尾的元素
[foo*="bar"] 选中foo属性包含bar的元素
后代选择器
在A中寻找B，忽略了嵌套层次，只要包含即选中
h1空格em //在h1中找到em
子选择器
h1 > strong{}
//在DOM树中表示为和h1直接相连的strong标记
兄弟选择器
.className + span //选择className的元素的兄弟标签span
:link,:visited,:focus,:hover,:active
- 我们都知道链接在浏览器中默认存在访问前后颜色的变化，那么可以通过伪类去更改样式，
a:link选择了a元素而且是链接的（也就是有href属性），还存在a标签作为锚，例如<a name = "node1" >Content</a>，那么:link伪类便不会选中它。 - focus聚焦，active激活，hover悬浮
:first-child选择器
它选择的是前面的元素，不要认为是前面元素的孩子，p:first-child选择属于其父元素的首个子元素的每个<p>元素。
选择列表中的第一个 <li> 元素并设置其样式：
li:first-child{}
:first-letter,:first-line
层叠规则
层叠规则
链接伪类的排列顺序
我们知道LVHA这四个伪类的特殊性是一样的，那么与元素匹配的最后一个伪类才会胜出。
:active{}
:hover{}
:link{}
:visited{}
//我们都知道链接要么被访问，要么未被访问，那么当鼠标悬停到链接上时，它满足:hover和:link，因为排列较后的伪类权重大，所以:hover属性将会被覆盖，所以推荐顺序如下：
:link{}
:visited{}
:hover{}
:active{}
//应用：未访问链接有hover属性，已访问则没有
：link{}
:hover{}
:visited{}
:active{}
//未访问链接悬停时，满足link和hover，则hover胜出，已访问链接悬停时，满足hover，visited，则visited胜出
长度单位em
一种给定字体大小的font-size值，也就是说，如果h1的font-size为20px，那么给它设置padding-left值，则此值为20px；
继承
继承
字体并不是一种字体，而是一系列
-
sans-serif字体
成比例，例如Helvetica
- Monospace字体
等宽字体
如果希望文档使用一种sans-serif字体，那么就设置font-family为这个值，而不必指定具体的字体。
//在字体选择这里提供通用字体，用户代理会从左到右依次匹配，如果都没有匹配成功， 那么便会
//简单的在本机中选择最后一种通配字体
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
如果字体名中含有特殊符号，例如空格，$,#，那么请使用引号包括起来。
给sans-serif增加引号，则表示找到与此同名的字体，不增加则是我们所期望的使用通配字体。
行高line-height
行高
行高的继承
body{font-size:10px;}
div{line-height:1em;}
p{font-size:18px;}
上述出来的结果可能是这样的
原因：div的行高设置为1em，它继承了父类的font-size为10px，那么对于此div来说1em == 10px，这个行高便又继承给了其孩子p标签，所以会显示错误，仔细想想，我们的本意是让div的孩子都按照各自的font-size去决定它们自己的行高，现在却并没有实现，所以需要使用缩放因子，也就是给line-height指定数字，那么接下来所有的子元素便会根据自己的font-size去计算。
body{font-size:10px;}
div{line-height:1;}//这儿这儿
p{ width: 200px;font-size:18px;}
处理空白符 white-space
- normal：按照正常情况来，会忽略空白格
- pre：就像写代码一样，会识别所有空白格和回车
总结
