【CSS学习笔记2】-css复合选择器
1.emmet语法
1.1快速生成html标签
提高html编写的速度
标签+tab：完整
标签*nu：生成多个
标签1>标签2：包含
标签1+标签2：并列
标签.类名：直接为标签加上类（默认div 可以直接写".类名"
标签#类名：直接为标签加上id
标签.类名$*数量：一次性生成多个排好序的标签 $自增
<div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><div class="demo4"></div><div class="demo5"></div>标签{文本} ：div{中文}
<div>中文</div><div>语文</div><div>语文</div><div>语文</div><div>语文</div><div>语文</div>div{$}*5
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>1.2快速生成css样式
样式缩写：每个字母的首字母
tac: text-align：center
ti：text-indent
w100：width：100px
2CSS复合选择器
简单选择器组合而成
复合选择器、子选择器、并集选择器、伪类选择器
2.2后代选择器（重要）
包含选择器 可以选择父元素中的子元素
元素1必须包含元素2
元素1 元素2 元素3...{ 样式 }
ol li {color: red;}
ol li a {color: pink;
}
如果想对同标签的 某一个标签中的标签修改样式，可以给这个标签单独加上 类 用类来修改样式
<ul class="one"><li>我是ul的孩子</li><li>我是ul的孩子</li><li>我是ul的孩子</li><li><a href="#">ul链接</a></li><li><a href="#">ul链接</a></li><li><a href="#">ul链接</a></li><li><a href="#">ul链接</a></li></ul>单独对这个列表中的a进行修改
.one li a {color: green; }2.3子选择器（重要）
只能选择某元素的最近一级的子元素，只能选亲儿子
元素1>元素2 { }
对于
<div class="nav"><a href="#">我是儿子</a><p><a href="#">我是孙子</a></p></div>如果是后代选择器，则两个a可以修改样式
.nav a {color: blue;}如果是子选择器，则只能选择儿子 用>号隔开
.nav>a {color: orange;}2.4并集选择器（重要）
可以选择多组标签，定义为相同的样式，用于集体声明，任何选择器都可以作为并集选择器的一部分
元素1，元素2 { 样式} 竖着写
对于
<div>熊大</div><p>熊二</p><span>光头强</span><ul class="pig"><li>小猪佩奇</li><li>乔治</li><li>小猪妈妈/li></ul>把熊大熊二改为粉色
div,
p { color: pink;}把熊大熊二改为粉色 小猪一家改为绿色
div,p,.pig li { color: pink;}2.5伪类选择器
语法
selector:pseudo-class {property: value;
}用于向某些选择器添加特殊的效果，比如给链接添加特殊效果。 （例如经过链接的时候颜色变化
伪链接选择器（锚伪类
）
a:link /*选择未被访问的链接
a:vitisted 访问过的
a:hover 鼠标经过
a:active/*选择活动链接，鼠标按下未松开这几个伪类选择器不能交换顺序LVHA
开发中链接会单独指定样式
一般开发中只会用到hover
a {color:gray;
}
a:hover {color:red;
}
2.6:focus 伪类选择器
用于选取获得焦点的表单元素 ,也就是鼠标点击之后的样式
焦点就是光标，一版input类表单元素才能获取
总结
3.CSS元素显示模式
更好的布局页面
html元素：块元素、行内元素
3.1html块元素
<h1> <p> <div> <ul> <ol> <li>
特点是图占一行、高度宽度边距都可以控制、宽度默认是容器的100%、是一个容器及盒子 可以放行内元素或者块级元素
文字元素内不能放块元素（盒子）
3.2行内元素
<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
相邻元素 在一行 一行可以显示多个、高宽设置无效、默认u暗渡是他本身的宽度、行内元素只能容纳文本或其他行内元素
链接之内不能放链接 a中可以放块元素
3.3行内块元素
<img /> <input /> <td />
同时具有块元素和行内元素的特点
一行可以有多个、默认宽度、高度宽度边距都可以控制
3.4ccs元素显示模式转换
转化为块元素 display：block；
转化为行内元素 display:inline;
转化为行内块元素 display: line-block
这里是把链接a转化为了块元素
<style>a {/* 转化为块元素 */display: block;width: 100px;height: 100px;background-color: pink;}</style>
div {/* 转化为行内元素 */display: inline;background-color: lightblue;/* 这里长宽失效 */width: 100px;height: 100px;}4css背景
4.1背景图片
实际开发中logo 或者装饰性的小图片 、超大背景图片等 优点是非常便于控制位置
width: 500px;
height: 300px;
/* 背景图片 默认情况下背景平铺 */
background-image: url(image.png);
/* 背景不平铺 */
background-repeat: no-repeat;
/* 沿x轴平铺 */
background-repeat: repeat-x;
/* 沿y轴平铺 */
background-repeat: repeat-y;
/* 可以设置颜色 但是图片会盖住颜色 */
background-color: aqua;
/* 背景图片的位置 如果只确定了一个参数 那么另一个方向则默认是居中的*/
background-position: center right;
4.2背景位置
方位名词前后顺序随意
精确单位 第一个是x坐标、第二个是y坐标（距离左边、顶部的距离，另：如果只指定一个值则是x值 y值默认居中
也可以混合使用
background-position: center top;
background-position: center 20px; x轴居中、y轴距离顶部 20像素
4.3背景图像固定
background-attachment: fixed;
4.4背景复合写法
background: 颜色、地址、平铺、图像滚动、位置
background: black url(bg-63580614.jpg) no-repeat fixed top;
4.5背景色半透明
background:rgba(0,0,0,0.3);最后一项是透明度
5案例-五彩导航
