《CSS权威指南》学习笔记

类选择器

选择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标签作为锚，例如Content，那么:link伪类便不会选中它。
• focus聚焦，active激活，hover悬浮

:first-child选择器

它选择的是前面的元素，不要认为是前面元素的孩子，p:first-child选择属于其父元素的首个子元素的每个

元素。
选择列表中的第一个

元素并设置其样式：

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：就像写代码一样，会识别所有空白格和回车

总结