十、复合选择器
把ol的li改为pink 使用后代选择器 元素一 元素二 { 样式 }
ol li {
color: pink;
}
ol li a {
color: red;
}
子选择器 元素1>元素2 { 样式 } 只选最近一级子元素
.nav>a {
color: green;
}
.na li a {
color: red;
}
并集选择器 基础选择器用逗号（,）分割 喜欢竖着写 最后一个不用逗号
ul li,
p {
color: blue;
}
伪类选择器 未访问过的链接 a:link 访问过的链接 a:visited 鼠标悬浮 a:hover 按下未弹起 a:active
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: orange;
}
a:hover {
color: green;
}
a:active {
color: pink;
}
:focus 伪类选择器 选取获得焦点的表单元素
input:focus {
background-color: yellow;
}
十一、CSS背景
div {
width: 200px;
height: 200px;
背景颜色 background=color 默认为transparent
background-color: pink;
背景图片 background=image url() 不能省
background-image: url(images/4.jpg);
背景平铺 默认情况为平铺 repeat-x repeat-y 沿x，y平铺 no-repaet 不平铺
background-repeat: no-repeat;
页面元素既可以添加背景颜色，也能添加背景图片，只不过背景图片会压住背景颜色
背景图片位置 background-position: x y; 参数代表：x坐标和y坐标 可以使用方位名词(top center bottom left right)或精确单位
background-position: right center;
如果是方位名词 center right 和 right center是一样的 写一个 第二个默认为center
background-position: 20px 50px;
如果是精确方位 那么第一个参数一定是x坐标 第二个参数是 y坐标 只写一个，是x，另一个不写的默认center
存在混合单位 background-position: 20px center; 等价于background-position: 20px;
}
h3 {
width: 118px;
height: 40px;
background-color: pink;
font-size: 14px;
font-weight: 400;
background-image: url(images/59.png);
background-repeat: no-repeat;
line-height: 40px;
background-position: left center;
text-indent: 2em;
}
body {
background-image: url(images/23.png);
background-repeat: no-repeat;
background-position: center 40px;
背景图片固定 background-attachment: fixed; 默认为滚动 scroll
background-attachment: fixed;
简写形式 顺序没有强制性
rgba a为透明度
background: rgba(0, 0, 0, 0.5) url(images/23.png) no-repeat fixed center 40px;
}
十二、CSS三大特性
CSS三个特性：层叠性 继承性 优先级
div {
color: red;
font-size: 14px;
}
div {
color: pink!important;
}
样式冲突，遵从的是就近原则 ，哪个样式离结构近 就执行哪个 ； 样式不冲突 不层叠
body {
font: 12px/1.5 ;
}
子元素div继承父类body行高1.5 1.5指当前元素文字大小的1.5倍
div {
color: red;
font-size: 14px;
}
优先级 继承或* < 标签选择器 < 类（伪类）选择器 < id选择器 < 行内样式 style="" < !important 重要的
a链接浏览器默认指定样式 比继承body的优先级高
复合选择器有权重叠加问题 权重可以有叠加，但不会有进位
ul li 权重 0,0,0,1+0,0,0,1=0,0,0,2
ul li {
color: blue;
}
li 权重是 0,0,0,1
li {
color: brown ;
}
.nav li权重为 0,0,1,0+0,0,0,1=0,0,1,1
.nav li {
color: black;
}
example：p 继承了div的样式 子元素可以继承父类样式 （text- font- line- 这些可以继承 以及color）
龙生龙，凤生凤，老鼠的儿子会打洞
