2.19 css选择器有哪些？优先级分别是什么？哪些属性可以继承？
一、选择器
CSS选择器是CSS规则的第一部分
它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式
选择器所选择的元素，叫做“选择器的对象”
我们从一个Html结构开始
<div id="box"> <div class="one"> <p class="one_1"></p> <p class="one_1"></p> </div> <div class="two"></div> <div class="two"></div> <div class="two"></div> </div>
关于css属性选择器常用的有：
1- id选择器（#box），选择id为box的元素 2- 类选择器（.one），选择类名为one的所有元素 3- 标签选择器（div），选择标签为div的所有元素 4- 后代选择器（#box div），选择id为box元素内部所有的div元素 5- 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素 6- 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素 7- 群组选择器（div,p），选择div、p的所有元素
还有一些使用频率相对没那么多的选择器：
- 伪类选择器
1:link ：选择未被访问的链接 2:visited：选取已被访问的链接 3:active：选择活动链接 4:hover ：鼠标指针浮动在上面的元素 5:focus ：选择具有焦点的 6:first-child：父元素的首个子元素
- 伪元素选择器
1:first-letter ：用于选取指定选择器的首字母 2:first-line ：选取指定选择器的首行 3:before : 选择器在被选元素的内容前面插入内容 4:after : 选择器在被选元素的内容后面插入内容
- 属性选择器
1[attribute] 选择带有attribute属性的元素 2[attribute=value] 选择所有使用attribute=value的元素 3[attribute~=value] 选择attribute属性包含value的元素 4[attribute|=value]：选择attribute属性以value开头的元素
在CSS3中新增的选择器有如下：
- 层次选择器（p~ul），选择前面有p元素的每个ul元素
- 伪类选择器
1:first-of-type 父元素的首个元素 2:last-of-type 父元素的最后一个元素 3:only-of-type 父元素的特定类型的唯一子元素 4:only-child 父元素中唯一子元素 5:nth-child(n) 选择父元素中第N个子元素 6:nth-last-of-type(n) 选择父元素中第N个子元素，从后往前 7:last-child 父元素的最后一个元素 8:root 设置HTML文档 9:empty 指定空的元素 10:enabled 选择被禁用元素 11:disabled 选择被禁用元素 12:checked 选择选中的元素 13:not(selector) 选择非 <selector> 元素的所有元素
- 属性选择器
[attribute*=value]：选择attribute属性值包含value的所有元素 [attribute^=value]：选择attribute属性开头为value的所有元素 [attribute$=value]：选择attribute属性结尾为value的所有元素
二、优先级
相信大家对CSS选择器的优先级都不陌生：
内联 > ID选择器 > 类选择器 > 标签选择器
到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
如果存在内联样式，那么 A = 1, 否则 A = 0
B的值等于 ID选择器出现的次数
C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
D 的值等于 标签选择器 和 伪元素 出现的总次数
这里举个例子：
1#nav-global > ul > li > a.nav-link
套用上面的算法，依次求出 A B C D 的值：
因为没有内联样式 ，所以 A = 0
ID选择器总共出现了1次， B = 1
类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1
标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3
上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)
知道了优先级是如何计算之后，就来看看比较规则：
从左往右依次进行比较 ，较大者优先级更高
如果相等，则继续往右移动一位进行比较
如果4位全部相等，则后面的会覆盖前面的
经过上面的优先级计算规则，我们知道内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!important
三、继承属性
在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性 关于继承属性，可以分成：
- 字体系列属性
1font:组合字体 2font-family:规定元素的字体系列 3font-weight:设置字体的粗细 4font-size:设置字体的尺寸 5font-style:定义字体的风格 6font-variant:偏大或偏小的字体
- 文本系列属性
1text-indent：文本缩进 2text-align：文本水平对齐 3line-height：行高 4word-spacing：增加或减少单词间的空白 5letter-spacing：增加或减少字符间的空白 6text-transform：控制文本大小写 7direction：规定文本的书写方向 8color：文本颜色
- 元素可见性
1visibility
- 表格布局属性
1caption-side：定位表格标题位置 2border-collapse：合并表格边框 3border-spacing：设置相邻单元格的边框间的距离 4empty-cells：单元格的边框的出现与消失 5table-layout：表格的宽度由什么决定
- 列表属性
1list-style-type：文字前面的小点点样式 2list-style-position：小点点位置 3list-style：以上的属性可通过这属性集合
- 引用
1quotes：设置嵌套引用的引号类型
- 光标属性
1cursor：箭头可以变成需要的形状
继承中比较特殊的几点：
- a 标签的字体颜色不能被继承
- h1-h6标签字体的大下也是不能被继承的
无继承的属性
display
文本属性：vertical-align、text-decoration
盒子模型的属性：宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
2.20 怎么触发BFC，BFC有什么应用场景？
文档流
在介绍BFC之前，需要先给大家介绍一下文档流。
我们常说的文档流其实分为定位流、浮动流、普通流三种。
绝对定位(Absolute positioning)
如果元素的属性 position 为 absolute 或 fixed，它就是一个绝对定位元素。
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。
它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；
对于 position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于body；
对于 position:fixed，正常来说是相对于浏览器窗口定位的，但是当元素祖先的 transform 属性非 none 时，会相对于该祖先进行定位。
浮动 (float)
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
普通流 (normal flow)
普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。
除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
BFC 概念
先看下MDN上关于BFC的定义：
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
除了 BFC，还有：
IFC（行级格式化上下文）- inline 内联
GFC（网格布局格式化上下文）- display: grid
FFC（自适应格式化上下文）- display: flex或display: inline-flex
注意：同一个元素不能同时存在于两个 BFC 中。
BFC的触发方式
MDN上对于BFC的触发条件写的很多，总结一下常见的触发方式有（只需要满足一个条件即可触发 BFC 的特性）：
根元素，即 <html>
浮动元素：float 值为 left 、right
overflow 值不为 visible，即为 auto、scroll、hidden
display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
绝对定位元素：position 值为 absolute、fixed
BFC的特性
BFC 是页面上的一个独立容器，容器里面的子元素不会影响外面的元素。
BFC 内部的块级盒会在垂直方向上一个接一个排列
同一 BFC 下的相邻块级元素可能发生外边距折叠，创建新的 BFC 可以避免外边距折叠
每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式的话，则相反），即使存在浮动
浮动盒的区域不会和 BFC 重叠
计算 BFC 的高度时，浮动元素也会参与计算
应用
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。
自适应两列布局
左列浮动（定宽或不定宽都可以），给右列开启 BFC。
<div> <div class="left">浮动元素，无固定宽度</div> <div class="right">自适应</div> </div> * { margin: 0; padding: 0; } .left { float: left; height: 200px; margin-right: 10px; background-color: red; } .right { overflow: hidden; height: 200px; background-color: yellow; }
效果：
将左列设为左浮动，将自身高度塌陷，使得其它块级元素可以和它占据同一行的位置。
右列为 div 块级元素，利用其自身的流特性占满整行。
右列设置overflow: hidden,触发 BFC 特性，使其自身与左列的浮动元素隔离开，不占满整行。这即是上面说的 BFC 的特性之一：浮动盒的区域不会和 BFC 重叠
防止外边距（margin）重叠
兄弟元素之间的外边距重叠
<div> <div class="child1"></div> <div class="child2"></div> </div> * { margin: 0; padding: 0; } .child1 { width: 100px; height: 100px; margin-bottom: 10px; background-color: red; } .child2 { width: 100px; height: 100px; margin-top: 20px; background-color: green; }
效果：
两个块级元素，红色 div 距离底部 10px，绿色 div 距离顶部 20px，按道理应该两个块级元素相距 30px 才对，但实际却是取距离较大的一个，即 20px。
块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的较大者，这种行为称为外边距折叠（重叠），注意这个是发生在属于同一 BFC 下的块级元素之间
根据 BFC 特性，创建一个新的 BFC 就不会发生 margin 折叠了。比如我们在他们两个 div 外层再包裹一层容器，加属性 overflow: hidden，触发 BFC，那么两个 div 就不属于同个 BFC 了
<div> <div class="parent"> <div class="child1"></div> </div> <div class="parent"> <div class="child2"></div> </div> </div> .parent { overflow: hidden; } /* ... */
这个关于兄弟元素外边距叠加的问题，除了触发 BFC 也有其他方案，比如你统一只用上边距或下边距，就不会有上面的问题。
父子元素的外边距重叠
这种情况存在父元素与其第一个或最后一个子元素之间（嵌套元素）。
如果在父元素与其第一个/最后一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的外边距 分开，此时子元素的外边距会“溢出”到父元素的外面。
<div id="parent"> <div id="child"></div> </div> * { margin: 0; padding: 0; } #parent { width: 200px; height: 200px; background-color: green; margin-top: 20px; } #child { width: 100px; height: 100px; background-color: red; margin-top: 30px; }
如上图，红色的 div 在绿色的 div 内部，且设置了 margin-top 为 30px，但我们发现红色 div 的顶部与绿色 div 顶部重合，并没有距离顶部 30px，而是溢出到父元素的外面计算。即本来父元素距离顶部只有 20px，被子元素溢出影响，外边距重叠，取较大的值，则距离顶部 30px。
解决办法：
给父元素触发 BFC（如添加overflow: hidden）
给父元素添加 border
给父元素添加 padding
这样就能实现我们期望的效果了：
清除浮动解决令父元素高度坍塌的问题
当容器内子元素设置浮动时，脱离了文档流，容器中总父元素高度只有边框部分高度。
<div class="parent"> <div class="child"></div> </div> * { margin: 0; padding: 0; } .parent { border: 4px solid red; } .child { float: left; width: 200px; height: 200px; background-color: blue; }
解决办法：给父元素触发 BFC，使其有 BFC 特性：计算 BFC 的高度时，浮动元素也会参与计算
.parent { overflow: hidden; border: 4px solid red; }
上面我们都是用的 overflow: hidden 触发 BFC，因为确实常用，但是触发 BFC 也不止是只有这一种方法。
如上面写的所示，可以设置float: left;，float: right;，display: inline-block;，overflow: auto;，display: flex;，display: table;，position 为 absolute 或 fixed 等等，这些都可以触发，不过父元素宽度表现不一定相同，但父元素高度都被撑出来了。
当然实际运用可不是随便挑一个走，还是根据场景选择。
