一、序列选择器：
#1、作用：
css3中新推出的选择器中，最具代表性的的9个，又称为序列选择器，过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个
#2、格式
#2.1 同级别
:first-child p:first-child 同级别的第一个
:last-child p:last-child 同级别的最后一个
:nth-child(n) 同级别的第n个
:nth-last-child(n) 同级别的倒数第n个
#2.2 同级别同类型
:first-of-type 同级别同类型的第一个
:last-of-type 同级别同类型的最后一个
:nth-of-type(n) 同级别同类型的第n个
:nth-last-of-type(n) 同级别同类型的倒数第n个
#2.3 其他
:only-of-type 同类型的唯一一个
:only-child 同级别的唯一一个
二、属性选择器
#1、作用：根据指定的属性名称找到对应的标签，然后设置属性
该选择器，最常用于input标签
#2、格式与具体用法：
[属性名]
其他选择器[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
例1：找到所有包含id属性的标签
[id]
例2：找到所有包含id属性的p标签
p[id]
例3：找到所有class属性值为part1的p标签
p[class="part1"]
例4：找到所有href属性值以https开头的a标签
a[href^="https"]
例5：找到所有src属性值以png结果的img标签
img[src$="png"]
例6：找到所有class属性值中包含part2的标签
[class*="part"]
三、伪类选择器
#1、作用：常用的几种伪类选择器。
#1.1 没有访问的超链接a标签样式：
a:link {
color: blue;
}
#1.2 访问过的超链接a标签样式：
a:visited {
color: gray;
}
#1.3 鼠标悬浮在元素上应用样式：
a:hover {
background-color: #eee;
}
#1.4 鼠标点击瞬间的样式：
a:active {
color: green;
}
#1.5 input输入框获取焦点时样式：
input:focus {
outline: none;
background-color: #eee;
}
#2 注意：
1 a标签的伪类选择器可以单独出现，也可以一起出现
2 a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
link，visited，hover，active
3 hover是所有其他标签都可以使用的
4 focus只给input标签使用
四、伪元素选择器
#1、常用的伪元素。
#1.1 first-letter：杂志类文章首字母样式调整
例如：
p:first-letter {
font-size: 48px;
}
#1.2 before
用于在元素的内容前面插入新内容。
例如：
p:before {
content: "*";
color: red;
}
在所有p标签的内容前面加上一个红色的*。
#1.3 after
用于在元素的内容后面插入新内容。
例如：
p:after {
content: "?";
color: red;
}
在所有p标签的内容后面加上一个蓝色的?。
五、CSS三大特性
1、继承性
#1、定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性
#2、注意：
1、只有以color、font-、text-、line-开头的属性才可以继承
2、a标签的文字颜色和下划线是不能继承别人的
3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大
ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
#3、应用场景：
通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式
2、层叠性
#1、定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果
#2、注意：
1、层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，
才会发生层叠性
ps：通过谷歌浏览器可以查看到，一些属性被划掉了
3、优先级
#1、定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定
#2、优先级
整体优先级从高到底：行内样式>嵌入样式和外部样式
行内样式并不推荐使用，所以我们以嵌入为例来介绍优先级
1、大前提：直接选中 > 间接选中(即继承而来的)
2、如果都是间接选中，那么谁离目标标签比较近，就听谁的
3、如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的
4、如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠
id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）
5、优先级之!important
#1、作用：还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!import的代码是无法维护的。
#2、注意：
1、!important只能用于直接选中，不能用于间接选中
2、!important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升
3、!important必须写在属性值分号的前面
6、优先级之权重计算
#1、强调
如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级
#2、计算方式
#1、id数多的优先级高
#2、id数相同，则判定类数多的优先级高
#3、id数、class数均相同，则判定标签数多的优先级高
#4、若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高
六、CSS属性设置
一、字体属性
1、font-weight：文字粗细
取值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
2、font-style：文字风格
normal 正常，默认就是正常的
italic 倾斜
3、font-size：文字大小
fs：一般是12px或13px或14px
注意：
1、通过font-size设置文字大小一定要带单位，即一定要写px
2、如果设置成inherit表示继承父元素的字体大小值。
4、font-family：文字字体
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
常见字体：
serif 衬线字体
sans-serif 非衬线字体
中文：宋体，微软雅黑，黑体
注意：
1、设置的字体必须是用户电脑里已经安装的字体，浏览器会使用它可识别的第一个值。
2、如果取值为中文，需要用单或双引号扩起来
5、文字属性简写
/*font-weight: bolder;*/
/*font-style: italic;*/
/*font-size: 50px;*/
/*font-family: 'serif','微软雅黑';*/
简写为
font: bolder italic 50px 'serif','微软雅黑';
6、color：文字颜色
取值 格式
英文单词 color：red;
rgb color：rgb(255,0,0)
rgba color：rgba(255,0,0,0.1);
十六进制 color: #FF0000;
七、文本属性
1、text-align：规定元素中的文本的水平对齐方式。
值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
2、text-decoration：文本装饰
值 描述
none 默认。定义标准的文本，通常用来去掉a标签的下划线
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。
3、text-indent：首行缩进
#将段落的第一行缩进 32像素,16px;=1em;
p {
text-indent: 32px;
}
4、line-height：行高
八、背景属性
注意：没有宽高的标签，即便设置背景也无法显示
属性：
background-color：设置标签的背景颜色的
background-image：设置标签的背景图片
background-size：设置标签的背景图片的宽、高
background-repeat：设置标签的背景图片的平铺方式
background-attachment：设置标签的背景图片在标签中固定或随着页面滚动而滚动
background-position：前端的坐标系"：
--------------------x轴
|
|
|
|
|
|
y轴
图片默认都是在盒子的左上角，
background-position：属性，就是专门用于控制背景图片的位置
inherit：设置从父元素继承background属性值
背景缩写
#背景图片和插入图片的区别
#1、
背景图片仅仅只是一个装饰，不会占用位置，
插入图片会占用位置
#2、
背景图片有定位属性，可以很方便地控制图片的位置，
而插入图片则不可以
#3、
插入图片语义比背景图片的语义要强，所以在企业开发中如果你的图片
想被搜索引擎收录，那么推荐使用插入图片
#4、
#1、什么是CSS精灵图（可以通过浏览器抓包分析：微博，京东都有精灵图）
CSS精灵图是一种图像合成技术
#2、CSS精灵图的作用
一个电商网站可能有很多图片，比如有10张图片，这就要求客户端发10次请求给服务端
但其实一次请求的带宽就足够容纳10张图片的大小
精灵图的作用就是用来较少请求次数，以及降低服务器处理压力
#3、如何使用CSS精灵图
CSS的精灵图需要配合背景图片和背景定位来使用
#4、强调：切图需要用到frameworks软件，可以知道每个图片具体宽多少个像素高多少个像素，该软件与ps属于一个家族
在右面，图层-》位图-》出一把锁固定住图片
然后左侧，有一个切片工具，框住图片
九、盒子模型
1、什么是CSS盒子模型？
HTML文档中的每个元素都被比喻成矩形盒子， 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如果把一个盒子比喻成一个壁挂相片，那么
#外边距margin ===== 一个相框与另外一个相框之间的距离
#边框border ====== 边框指的就是相框
#内边距padding ===== 内容/相片与边框的距离
#宽度width/高度height ===== 指定可以存放内容/相片的区域
提示：可以通过谷歌开发者工具查看盒子的各部分属性
2、盒子模型的宽度和高度
#1、内容的宽度和高度
通过标签的width和height属性设置
#2、元素/盒子模型的宽度和高度
宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度
高度= 。。。。
#3、元素/盒子模型空间的宽度和高度
宽度= 左外边距 + 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度 + 右外边距
高度= 。。。。
3、css显示模式:块级、行内、行内块级
在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素
#1、HTML中容器级与文本级
容器级标签：可以嵌套其他的所有标签
div、h、ul>li、ol>li、dl>dt+dd
文本级标签：只能嵌套文字、图片、超链接
span、p、buis、strong、em、ins、del
#2、CSS中块级与行内
块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级
div、h、ul、ol、dl、li、dt、dd 还有标签p
行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内
span、buis、strong、em、ins、del
行内块级 img
#3、块级元素与行内元素的区别
1、块级元素block
独占一行
可以设置宽高
若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body的宽）
若没有设置宽高，那么就按照设置的来显示
2、行内元素inline
不会独占一行
不可以设置宽高
盒子宽高默认和内容一样
3、行内块级元素inline-block
不会独占一行
可以设置宽高
4、div与span
布局都是用块级元素，而行内元素是控制内容显示的。
1、div标签
一般用于配合css完成网页的基本布局
2、span标签
一般用于配合css修改网页中的一些局部信息，比如一行文字我们只为一部分加颜色
我是egon
3、div和span有什么区别？
div一般用于排版，而span一般用于局部文字的样式
1、站在CSS的角度：div是一个块级元素、独占一行，而span是一个行内元素、不会单独占一行
2、站在HTML的角度：div是一个容器级标签，而span是一个文本级标签