BFC以及各种css选择器

一、BFC（普通的div不是BFC）

1、定义：块级元素格式化上下文

2、BFC触发条件：

（1）根元素html默认为BFC

（2）子元素设置浮动以及绝对定位和固定定位时

（3）设置的overflow属性值不为visible

（4）display的值为：inline-block/table-caption/table-cell/flex/inline-flex

3、BFC的特性及应用

（1）盒子在垂直方向的距离由margin决定，属于同一个BFC的两个相邻的盒子的margin值会发生重叠。（应用：防止margin发生重叠）

（2）BFC的区域不会和设置浮动的盒子发生重叠（应用：自适应两栏布局）

（3）计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）

（4）BFC内部的盒子会在垂直方向一个接一个的放置

（5）BFC是一个独立的容器

二、css选择器

（一）

1、属性选择器：选择属性进行操作，例：

对带有type属性的进行操作：

type="value"  选择的的type属性值是value

type^="value"  选择的type属性值的开始位置有value

type$="value"  选择的type属性值的结束位置有value

2、属性选择器无法识别  :  //  .  等特殊符号，如遇到需用双引号引住

（二）结构伪类选择器：

1、first-child（选择第一个元素）/

last-child（选择最后一个元素）/

nth-child(n)   选择第n个元素或者是奇数（odd）偶数（even）（只会计算同一类型的元素）/

nth-last-child(n)（选择倒数第n个元素）

2、first-of-type（选择第一类元素）/

last-of-type（选择最后一类元素）/

nth-of-type() （选择第n个元素或者是奇数（odd）偶数（even）/

nth-last-of-type()   选择倒数第n个元素或者是奇数（odd）偶数（even）

3、E:only-child   只有一个子元素，并且该子元素为E才会选择他

4、E:only-of-type  只有一类元素

5、:empty   元素为空（连空格也不允许）

6、:root  操作的为body的样式

（三）状态伪类选择器：表单控件

1、:disabled  禁用表单原有的样式

2、:enabled  正常使用的表单的样式

3、:checked   选中之后表单的样式

4、:focus获取焦点之后的样式

5、在等号前面添加*代表选择所有的包含该属性值的元素（例：[class*="x"]{ background: pink;}）

（四）否定伪类选择器

:not()除了什么什么，选择除某个元素之外的所有其他元素

（五）后代选择器

（六）目标伪类选择器

:target：选择匹配的所有元素，：前面只能是被操作的元素