BFC和css选择器

BFC
定义：块级格式化上下文
作用：相邻元素垂直外边距合并，margin-top值传递【子元素设置margin-top之后，父元素会随之下移】，
高度塌陷【父元素没有设置高度，子元素设置浮动之后】
BFC触发的条件：
1.根元素 html默认就是一个BFC
2.float的值不为none 单纯的div不是BFC，如果添加了浮动就是BFC
3.overflow的值不为visible  单纯的div不是BFC，如果添加了overflow：hidden等就是BFC
4.display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex 
5.position的值为absolute或fixed
双飞翼布局
-------------------------------------------------------------------------------------------------
属性选择器
语法：[标签属性]{}    属性选择器无法识别 ： // .  这些带特殊符号的属性需要加""
1.E[attr]
希望选择有某个属性的元素，而不论属性值是什么  
例如：a[href]{color:red;}
2.E[attr=”value”]
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，
只选择有特定属性值的元素  
例如: a[href=”www.baidu.com”]{color:red;}
3.E[attr^=”value”]
指定了属性，并且指定了属性值，属性值是以value开头的 
例如：a[title^="text"] {color: red;}
4.E[attr$=”value”]
指定了属性，并且指定了属性值，属性值是以value结尾的 
 例如：a[title$="text"] {color: red;}
---------------------------------------------------------------------------------------------------
结构伪类选择器
1.：first-child{选择第一个元素}
2.：last-child{选择最后一个元素}
3.：nth-child（）{第几个元素 或者是odd奇数和even偶数}
4.：nth-last-child（）{选择某个元素的一个或多个特定的子元素，最后一个子元素开始算}
5.：first-of-type{选择一个上级元素下的第一个同类子元素}
6.：last-of-type{选择一个上级元素的最后一个同类子元素}
7.：nth-of-type（）选择指定的元素 只计算选择器指定的那个元素
8.：nth-last-of-type（）选择指定的元素，从元素的最后一个开始计算
9.：only-of-type  选择一个元素是它的上级元素的唯一 一个相同类型的子元素
10.：empty  选择的元素里面没有任何内容
11.：root      选择文档的根元素
12.：only-child  选择的元素是它的父元素的唯一 一个子元素；
----------------------------------------------------------------------------------------------
状态伪类选择器
常用处：表单控件
1.disabled   禁用表单的样式
2.enabled   正常使用的表单的样式
3.checked   选中之后的样式
4.focus       获取焦点后的样式
-----------------------------------------------------------------------------------------------------
否定伪类选择器
 语法：属性:not()  
除了什么什么  可以让你定位不匹配该选择器的元素
-----------------------------------------------------------------------------------------------------
目标伪类选择器
  :target 
选择器可用于选取当前活动的目标元素。
定义：使用该选择器来对页面中的某个target元素
（该元素的id当做页面中的超链接来使用）指定样式，
该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。