第三章 选择器：明确设置哪些样式
1、标签选择器
2、类选择器
1）所有类选择器的名称必须以一个圆点开头
2）CSS只允许在类名称中使用字母、数字、连字符和下划线
3）在圆点之后，名称始终必须以字母开头
4）类名称区分大小写
3、ID选择器
1）所有ID选择器的名称必须以一个井号开头
4、群组选择器（用逗号分隔）
5、通用选择器（*）
6、派生选择器
7、HTML族谱
1）祖先标签
2）派生标签
3）父标签
4）子标签
5）同胞标签
8、伪类（单冒号）
1）a:link：指访问者还没有访问到、鼠标也尚未滑到过或单击过的链接
2）a:visited：指根据Web浏览器的历史记录，访问者之前已经单击过的链接
3）a:active：访问者鼠标单击时的链接
4）:hover：指访问者鼠标滑过时
5）:focus：指访问者执行某些动作时
9、伪元素（双冒号）
1）:first-letter：定义段落的首字母
2）:first-line：定义段落的首行
3）:before：在指定的元素前面添加内容，在IE8及其以上版本和所有其他的主流浏览器都有效
4）:after：在指定的元素后面添加内容，在IE8及其以上版本和所有其他的主流浏览器都有效
5）::selection：在选中的项目上面添加字体颜色和背景颜色，默认::selection{ color:#ffffff; }，在IE9、Opera、Chrome和Safari中有效，在IE8和Firfox中无效
10、属性选择器
1）=表示属性是什么
2）^=表示属性以什么开始
3）$=表示属性以什么结尾
4）*=表示属性包含什么
11、子选择器
1）所有子选择器的名称必须在两个元素之间使用尖括号
2）伪类
:first-child：选择和格式化该元素的第一个子标签
:lastchild：选择和格式化该元素的最后一个子标签
:nth-child：选择和格式化该元素的交替子标签，如tr:nth-child(odd/even/2n+1) {
12、子类型选择器最用于
:first-of-type：作用于具有特殊标签的第一个元素
:last-of-type：作用于具有特殊标签的最后一个元素
:nth-of-type：作用于具有特殊标签的交替子标签，如img:nth-of-type(odd/even/2n+1) {float:left};
13、同胞选择器
1）+表示把一个元素和下一个元素连接起来，该选择器中的最后一个元素就是获得样式的元素
2）~表示选择这个类型中的所有同胞标签
3）:not()：否定伪类，如a[href^=”http://”]:not([href*=”mysite.com”]);，:not()选择器不能用于派生选择器，只能用于元素选择器、通用选择器、类选择器、ID选择器、伪类，不能使用多个:not()选择器。
第四章 用样式继承节省时间
1、继承的局限性
1）一般说来，影响网页元素位置的属性，或者页边距、背景颜色和元素的边框线等都不会被继承
2）Web浏览器用它们自己固有的样式为各种标签设置样式
3）当有样式发生冲突时，更具体的样式会胜出
第五章 用层叠管理多样式
1、样式冲突
1）从多个祖先处继承了同一种属性的时候，最近的祖先样式胜出
2）当一个或多个样式应用于同一个元素的时候，直接应用的样式胜出
2、一个标签，多个样式
1）标签同时应用了一个标签选择器和一个类选择器
2）同一个样式名称在样式表里出现了不止一次
3）一个标签同时应用了类和ID样式
4）多个样式表中都包含了附给某一个网页的同一个样式名称
5）有些复杂的选择器瞄准了同一个标签
3、样式的权重值
1）一个标签选择器值1分，伪元素通常被当做标签选择器看待
2）一个类选择器值10分，伪类通常被当做类选择器看待
3）一个ID选择器值100分
4）一个内建样式值1000分
样式的权重值越大，样式的优先级越高；样式的权重值相同时，最后一个样式胜出。
4、控制层叠
1）改变权重值
2）选择性地覆盖
3）避免权重战争，用类选择器代替ID选择器
4）重新创建样式：CSS reset
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‘‘;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}