一.复杂选择器 1.结构伪类选择器 1.:only-child 匹配的元素是属于其父元素中的唯一子元素。 2.否定伪类 将满足指定选择器的元素给排除在外。 语法：:not(selector){…} 3.伪元素选择器 1.::first-letter或:first-letter 作用：用于匹配元素的首字符 2.::first-line或:first-line 作用：用于匹配元素的首行 注意：如果首字符与首行样式冲突时，优先使用首字符样式。 3.::selection 作用：匹配被用户选取的内容。 注意：只能修改文本颜色和背景颜色。 练习：创建一个div元素，内容随意. 1.设置div中首字符样式为加粗，红色，大小为32px,右外边距为20px. 2.将首行的文本设置为橙色，斜体 3.用户选取内容时文本颜色为蓝色，背景为灰色。 4.内容生成 1.什么是内容生成 使用css动态的向元素中插入一段内容。 2.伪元素选择器 1.:before或::before 作用：匹配到某元素的内容区域之前。
(:before)床前明月光
2.:after或::after 作用：匹配到某元素的内容区域之后。 <p>床前明月光(:after)</p> 3.属性 属性：content 作用：向匹配到的位置处增加的内容 取值： 1.字符串，用""引起来。 2.url(图片路径) 练习：2分钟 <p>学而时习之，不亦说乎</p> <p>有朋自远方来，不亦乐乎</p> 输出显示如下： 子曰：学而时习之，不亦说乎 ——《摘自论语》 子曰：有朋自远方来，不亦乐乎 ——《摘自论语》 3.解决问题 1.上外边距溢出 1.在父元素的第一个子元素位置处 2.添加一个table标记，并且标记的内容为空 ex: 选择器::before{ content:""; display:table; } 2.解决浮动元素对父元素高度带来的影响 1.在父元素的最后一个子元素位置处 2.添加一个空的块级元素（display:block） 3.设置其clear属性的值为both ex: .类选择器:after{ content:""; display:block; clear:both; }二.弹性布局 1.什么是弹性布局 弹性布局(Flexible layout)是一种布局方式，主要解决某元素中“子元素”的布局方式，为布局提供最大的灵活性。 2.弹性布局的相关概念 1.弹性布局容器 子元素的父元素称为容器 2.项目 要实现布局的子元素，称为项目 3.主轴 项目们排列方向的一根轴，称为主轴 如果主轴是x轴，那么y轴就是交叉轴 4.交叉轴 与主轴垂直相交的一根轴，称为交叉轴 3.语法 1.弹性（flex）容器 将元素变为flex容器后，那么所有子元素都将变为flex项目，都允许按照弹型布局的方式排列。 2.属性:display 取值： 1.flex 将块级元素变为容器 2.inline-flex 将行内元素变为容器 注意： 1.元素设置为flex容器之后，子元素的float,clear,vertical-align将失效。 2.元素变为flex容器之后，子元素尺寸允许被修改（把子元素变为块级） 3.容器属性 1.flex-direction 作用:指定容器的主轴及其排列方向 取值： (1)row 默认值，即主轴为x轴，起点在左端 (2)row-reverse 主轴为x轴，起点在右端 (3)column 主轴为y轴，起点在顶端 (4)column-reverse 主轴为y轴，起点在底部 2.flex-wrap 作用：当一个主轴排列不下所有项目时，项目是否换行显示。 取值： 1.nowrap：默认值，即空间不足时也不会换行，项目自动缩小。 2.wrap:换行 3.wrap-reverse:换行并反转 3.flex-flow 作用：是flex-direction和flex-wrap的缩写形式。 取值： 1.row nowrap（默认值） 2.direction wrap 4.justify-content 作用：定义项目在主轴上的对齐方式。 取值： 1.flex-start 在主轴的起点对齐。 2.flex-end 在主轴的终点对齐。 3.center 在主轴上居中对齐。 4.space-between 两端对齐。 5.space-around 每个项目两端的间距相同。 5.align-items 作用：定义项目在交叉轴上的对齐方式。 取值： 1.flex-start 交叉轴上起点对齐。 2.flex-end 交叉轴上终点对齐。 3.center 交叉轴上居中显示。 4.baseline 交叉轴上基线对齐。 5.stretch 如果项目未设置尺寸，在交叉轴上占满所有空间。 练习： 网页中添加一个div，id为parent，设置parent的边框,在parent中再添加两个子元素div，id分别为d1和d2设置d1和d2的尺寸和背景颜色,将父元素变为容器，并设置d1和d2在容器中水平、垂直都居中显示，并且当容器缩小时，不改变项目的尺寸。（3分钟） 4.项目属性 该组属性只能设置在某一个项目元素上，只控制一个项目，不影响其他项目。 1.order 作用：定义项目的排列顺序，值越小，越靠近起点，默认值为0。 取值：整数数字，无单位。 2.flex-grow 作用：定义项目的放大比例，如果容器有足够的剩余空间，项目按照比例放大。 取值：整数数字，无单位。 默认值0，不放大。 取值越大，占据剩余空间的比例越多。 3.flex-shrink 作用：定义项目缩小比例，即容器空间不足时，项目按照比例缩小 取值：整数数字，无单位，值越大缩小的越快。 默认值1，空间不足时，则等比缩小。 取值为0，则不缩小。 4.align-self 作用：定义当前项目在交叉轴的对齐方式 取值： 1.flex-start 起点对齐 2.flex-end 终点 3.center 居中 4.baseline 基线对齐 5.stretch 未设定项目高度时占满父元素空间 6.auto 自动继承父元素align-items的属性值。 练习： 用弹性布局完成如图所示效果 三.转换 1.什么是转换 改变元素在页面中的位置，大小，角度以及形状的一种方式。 2D转换：只在x轴和y轴上发生转换效果 3D转换：增加z轴的转换效果 2.转换属性 1.转换属性 属性：transform 取值： 1.none：默认值，无任何转换效果 2.transform-function 表示1个或多个转换函数 如果是多个转换函数，中间用空格隔开 2.转换原点 属性：transform-origin 取值：数值/百分比/关键词 2个值，表示原点在x轴和y轴的位置。 3个值，表示原点在x轴y轴和z轴的位置。
默认的原点是在元素的中心位置：(center,center)/(50%,50%)3.2D转换 1.位置（位移） 1.什么是位移 改变元素在页面的位置。 2.语法 属性：transform 取值： 1.translate(x) 指定元素在x轴上位移距离 取值为正，元素向右移 取值为负，元素向左移 2.translate(x,y) 指定元素在x轴和y轴上位移一定距离 x:同上 y:指定元素在y轴上位移距离 取值为正，元素向下移 取值为负，元素向上移 3.translateX(x) 4.translateY(y) 2.缩放 1.什么是缩放 改变元素在页面中的尺寸（大小） 2.语法 属性：transform 取值： 1.scale(value) 取值为数字 value：横向和纵向缩放比例相同 默认值1，不缩放 value>1：放大 0<value<1：缩小 value<0：放大(水平和垂直方向都翻转180度)
2.scale(x,y) x:横向缩放比例 y:纵向缩放比例 3.单向缩放 scaleX(x)只在横向缩放 scaleY(y)只在纵向缩放 3.旋转 1.什么是旋转 改变元素在页面上的角度 2.语法 属性：transform 取值： rotate(ndeg) n取值为正，顺时针旋转 n取值为负，逆时针旋转 课后作业： 1.在页面中创建两个div，id分别为d1和d2,设置其尺寸为200*200px,添加不同背景; (1)将两个div都定位到父元素的左上角显示; (2)将d1先旋转45deg,再向右位移50px; (3)将d2向右位移50px，再旋转45deg，对比两个div的效果。 2.用弹性布局完成"课后作业.png"布局效果。