#CSS core #复杂选择器 #弹性布局

一 复杂选择器

1.兄弟选择器
相邻兄弟选择器：选择器1+选择器2{}  //找符合选择器1的元素后面挨在一起并且符合选择器2的元素
通用选择器：选择器1~选择器2{}      //找到符合1的元素 后面所有符合选择器2的元素


2.属性选择器
[attr]{}   //元素当中有arrt这个属性的元素
[attr1][attr2]{} //元素当中同时具备这两个属性的元素
[attr=value]{}   //匹配具备arrt并value具备的属性
[attr1=value][attr2=value]{}  //匹配具备这两个属性的元素
elem[attr]{}  //匹配elem元素有attr属性的元素
  /*  模糊属性查找 */
[title^="search"]{color:red}   匹配值以search开头
[title$="search"]{color:red}   匹配值以search结尾
[title*="search"]{color:red}   匹配值中含有search
[title~="search"]{color:red}   匹配值中含有search这个独立的单词（前后有空格）

3.伪类选择器
:link     //未访问
:visited  //访问
:hover 	  //鼠标悬停
:active   //激活
:focus    //获取焦点
:target   //目标伪类  例：div:target{} 目标激活时走这个样式
:select:first-child{}  匹配select的父元素的第一个子元素
:select:last-child{}   匹配select的父元素的最后一个子元素
:select:nth-child(b){} 匹配select的父元素的弟n个元素
:empty{}   匹配元素内部没有其他元素 没有空格 回车 文本
:only-child{}  匹配属于其父元素唯一的子元素
:not(选择器){}  否定伪类
::first-letter{}  匹配元素第一个字符样式
::first-line{}    匹配第一行文本的样式
::selection{}     匹配用户选中的文本 只能设置颜色和背景

4.内容生成
#a1::before{
	content:"元素内容区域前面添加伪元素"
	border:1px solid #f00;
	display:block;
	width:100px ;height:100px
}
#a2::after{
  content:"元素内容区域后面添加伪元素";
  background: #0ff;
  display: block;
  width: 100px;height: 100px;
}

#before 解决外边距溢出
#parent:before{
	content:"";
	display:table;
}
#parent::after{
	content:"";
	display:block;
	clear:both
}

二 弹性布局

1.弹性容器：在父元素上设置display:flex称为弹性容器 容器不是弹性布局 容器内部的子元素都按照弹性布局
2.弹性项目: 在父元素上设置display:flex; 这个父元素的子元素 都会按照弹性布局设置排列 
3.主轴:项目的排列方向 称为主轴
	   x轴,起点左侧 终点右侧(默认)
	   x轴,起点右侧 终点左侧
	   y轴,起点顶部 终点底部
	   y轴,起点底部 终点顶部
4.交叉轴：永远与主轴垂直的一个方向 

1.容器的样式属性：
display:flex;  让块级元素变成弹性容器
        inline 让行内元素变为弹性容器
        元素变成容器的时候 text-align失效 浮动都失效


主轴方向：flex-direction: row 默认值  x轴左侧起点
				row-reverse x轴右侧起点
				column      y轴顶端起点
				colunm-reverse y轴底端起点
是否换行：flex-wrap:nowrap 默认值 项目压缩不换行
		  wrap   空间不足直接换行
主轴对齐方式： just-content:flex-start 默认值
			  flex-end 主轴终点对齐
			  center 主轴终点对齐
			  space-around 项目左右间距相同
			  space-between 两端对齐
设置项目在交叉轴上的对齐方式：align-items:flex-start 默认值
			  flex-end   在交叉轴终点对齐
              center     在交叉轴的中心对齐
              baseline   每个项目中文本基线要求对齐
              stretch    项目在交叉轴的方向上写不同尺寸 撑满
单独设置某个项目在交叉轴上的对齐方式：align-self:flex-start 默认值
											  flex-end  终点对齐
											  center    中心对齐
											  baseline  文本基线
											  stretch   撑满
											  auto 		使用父元素设置的align-items取值
项目在主轴的排列顺序：order:数字   #取值越小越靠近主轴起点
 
flex-shrink:设置不可换行以后 主轴空间不够 项目会自动缩放尺寸 主轴方向压缩的尺寸，分为n份。设置每个项目具体被压缩几份

flex-grow:弹性容器在主轴方向 空间较大 项目的增长方式

flex-basis:设置每个项目在主轴方向占据的空间