CSS nth-child/nth-of-type选择器+overflow / BFC篇

nth-child选择器

• 语法：

  选择器:nth-child(公式) {

  ​

  ​ }

  1. 选择器E:nth-child(大于0的整数number) {
  					
  				   }
  找到选择器E表示的元素的父级里第number个子元素, 且保证该子元素的类型是E选择器类型的.
  
  例：ul li:nth-child(2) {
  				background-color: red;
  			}
  			
  
  2.  选择器E:nth-child(2n+1) {
  					
  				   	}
  	选择器E:nth-child(odd) {
  					
  				   	}
  找到选择器E表示的元素的父级里元素序号是奇数的子元素, 且保证该子元素的类型是E选择器类型的.
  
  例：ul li:nth-child(2n+1) {
  				background-color: blue;
  			}
    	ul li:nth-child(odd) {
  				background-color: blue;
  			}
  			
  
  3. 选择器E:nth-child(2n) {
  					
  					} 
  选择器E:nth-child(even) {
  					
  					} 
  找到选择器E表示的元素的父级里元素序号是偶数的子元素, 且保证该子元素的类型是E选择器类型的.
  
  例：ul li:nth-child(2n) {
  				background-color: red;
  			}
  	ul li:nth-child(even) {
  				background-color: yellow;
  			}	
  			
  			
  
  4.  选择器E:nth-child(n+number整数) {
  					
  					}
  找到选择器E表示的元素的父级里元素序号是number之后的所有的元素(包含第number个), 且保证该子元素的类型是E选择器类型的.
  			
  例：ul li:nth-child(n+5) {
  				background-color: lightblue;
  			}
  			
  
  5. 选择器E: nth-child(-n+number) {
  			  	
  			 	  }
  找到选择器E表示的元素的父级里元素序号是number之前的所有的元素(包含第number个), 且保证该子元素的类型是E选择器类型的.
  			
  例：ul li:nth-child(-n+4) {
  				background-color: pink;
  			}
  			
  	ul li+li+li:nth-child(-n+8) {
  				background-color: green;
  			}
  	ul li:nth-child(n+3):nth-child(-n+8) {
  				background-color: red;
  			}
  

nth-of-type

• 语法：

  ul li:nth-child(3) {

  ​ background-color: red;

  }

  注：nth-child的写法, nth-of-type都可以用

• nth-of-type和nth-child的区别:

      在父元素里面的子元素的类型一致的时候, 两者找元素的结果无差别
  

  ​ 但是, 一旦父元素里的子元素的类型不一致, 在通过nth-child查找元素的时候可能会出现, 子元素能找到, 但是不符合选择器的情况

  nth-of-type ：

  ​ 理解1: 可以理解成先从父元素里把不符合选择器E的元素过滤掉之后按照需要查找

  ​ 理解2: 把所有符合选择器E的元素拿出来, 在从中按照序号查找

• 补充:

  nth-last-child
  nth-last-of-type
  找元素的原理与nth-child和nth-of-type一致, 只不过顺序从最后一个往前数

overflow / BFC

• overflow样式规定, 当元素的内容溢出元素所在的区域时, 该如何处理这些内容

1. visible 默认值 无视内容的溢出

2. hidden 内容会被修剪, 溢出的内容不可见

3. scroll 内容也会被修剪, 但是浏览器会显示滚动条以便查看溢出的内容(哪怕某个方向的内容没有溢出)

4. auto 内容也会被修剪, 但是浏览器会显示滚动条以便查看溢出的内容(哪个方向需要才会显示滚动条)

• 概念普及

1. Box: 盒子, 这是CSS布局的基本单位, 一个页面本质上是由Box组成的. Box是由类型的, 元素的类型和display样式, 决定一个Box的类型, Box的类型有哪些:
   1.1. block-level box 块元素 BFC
   1.2. inline-level box 行元素 IFC
   只有block-level box 才与BFC有关系

​

2. Formatting context
   整个概念是css2.1推出的一个概念. 它表示页面里的一块渲染区域, 在整个区域内有自己的一套渲染规则, 它决定了在其内部的子元素如何布局, 以及与其他元素之间的关系.

• BFC(Block Formatting Context)

  直译为"块级格式化上下文" 它是一个独立的渲染区域, 只有block-level box参与.

• BFC元素的内部的排布规则:

  ​ 1. 内部的box会在垂直方向上, 一个一个的放置

  ​ 2. 内部的box垂直方向上的间距由margin决定, 属于同一个BFC的相邻的box的margin会出现重叠

  ​ 3. BFC的区域不会与浮动的box重叠

  ​ 4. BFC就是页面里的一个单独的区域(容器), 容器里的元素不会影响其外面的元素,反之, 外面的也不会影响里面的

  ​ 5. 计算BFC元素的高度时, 浮动的元素的高度也会被计算在内

• 如何让一个元素成为BFC

  ​ 1. 根元素

  ​ 2. overflow:不为visible

  ​ 3. position: absolute或者fixed;

  ​ 4. float:不为none;