css复合选择器
链接伪类选择器：
顺序不可变动，在实际开发中，一般先在a{}中写好共有的样式，然后再在a:link{}等中写各自的样式。
例：
<body>
<!-- 主导航栏 -->
<div class="nav">
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<!-- 侧导航栏 -->
<div class="sitenav">
<div class="site-l">左侧侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
</body>
<style>
.site-r a{
color: red;
}
.nav a{
color: orange;
}
.nav,
.sitenav{
font-size: 14px;
font-family: "微软雅黑";
}
</style>
标签显示模式(display)
块级元素
行内元素（内联元素）
行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
- 默认宽度就是它本身内容的宽度。
- 高度，行高、外边距以及内边距都可以控制。
标签显示模式转换
- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块： display: inline-block;
用到的时候写在style里相应的css选择器中即可。
行高
行高的测量
如何使文字垂直居中：
文字的行高等于盒子的高度。
行高=上距离+文字内容+下距离。因为上距离=下距离，所以只要行高=盒子高度，文字看起来就是垂直居中的。
css背景
背景颜色background-color: pink;
背景图片background-image : url(images/demo.png);
背景平铺background-repeat : ;
背景位置background-position:x坐标 y坐标;
背景附着background-attachment: ;
背景简写一般顺序background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
背景透明(css3)background: rgba(0, 0, 0, 0.3);
前三位为RGB值代表颜色，最后一个参数值为alpha透明度，取值在0-1之间。
css三大特性
层叠性
css样式冲突采取的原则：就近原则，后来居上。写在后面的会覆盖前面的。样式不冲突则不会层叠。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<div>
<p>层叠性</p>
</div>
</body>
</html>
继承性
子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: blue;
}
</style>
</head>
<body>
<div>
<p>继承性</p>
</div>
</body>
</html>
优先级
1.权重计算
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，如果选择器相同，那就按层叠性原则执行；如果选择器不同，就会出现优先级问题。
从左到右，左边的优先级大于右边的优先级，四位之间没有进位。在使用！important时，只要将它加在属性值后面即可。
2.权重叠加
上述权重都是针对每个单位的，所以在出现复合选择器等情况时，就会出现权重叠加。注意，这个叠加是没有进位的。
例
- div ul li ------> 0,0,0,3 （三个标签选择器
- .nav ul li ------> 0,0,1,2 （类选择器+两个标签选择器
- a:hover -----—> 0,0,1,1 （标签选择器+伪类选择器
- 0,0,0,5 + 0,0,0,5 =0,0,0,10
3.继承的权重是0
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<p>继承的权重为0</p>
</div>
</body>
</html>
在这个例子中，从表面上看，.nav是类选择器，权重为0,0,1,0，而p是标签选择器，权重为0,0,0,1，应该是.nav的优先级大于p的优先级。但是，表现样式的内容在p标签里，.nav没有直接选中p标签，red属性值是从.nav里继承过来的，继承的权重为0。所以小于p标签的权重。
4.关于css权重的六道题目
1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div div{
color:blue;
}
div{
color:red;
}
</style>
</head>
<body>
<div>
<div>
<div>
试问这行字体是什么颜色的？
</div>
</div>
</div>
</body>
</html>
在这个例子中，表现样式的标签为div，两个都选中了div，因此直接比较权重即可，div div>div
2）
<style type="text/css">
#father{
color:red;
}
p {
color:blue;
}
</style>
<div id="father">
<p>试问这行字体是什么颜色的？</p>
</div>
</body>
这个例子中，一个是继承权重为0，一个是标签选择器权重为0,0,0,1
3）
<style type="text/css">
div div div div div div div div div div div div{
color:red;
}
.me {
color:blue;
}
</style>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">试问这行文字是什么颜色的</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
在这个例子中，表现样式的标签为div，两个都是选中了的，第一个为标签选择器的叠加，第二个为ID选择器，根据权重的计算，左边大于右边，ID选择器的优先级是大于标签选择器的叠加的.
4）
<style>
div p { /*0,0,0,1+0,0,0,1=0,0,0,2*/
color:red;
}
#father { /*继承的权重为0*/
color:red;
}
p.c2{ /*0,0,0,1+0,0,1,0=0,0,1,1*/
color:blue;
}
</style>
<body>
<div id="father" class="c1">
<p class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
5）
<style type="text/css">
.c1 .c2 div{ /*0,0,1,0+0,0,1,0+0,0,0,1=0,0,2,1*/
color: blue;
}
div #box3 { /*0,0,0,1+0,1,0,0=0,1,0,1*/
color:green;
}
#box1 div { /*0,1,0,0+0,0,0,1=0,1,0,1 层叠性原则，后来居上*/
color:yellow;
}
</style>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
</body>
6）
<style type="text/css">
#father #son{ /*0，1，0，0+0，1，0，0=0，2，0，0*/
color:blue;
}
#father p.c2{
color:black;
}
div.c1 p.c2{
color:red;
}
#father{ /*继承权重为0*/
color:green !important;
}
</style>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>