当前位置: 首页 > 工具软件 > bttn.css > 使用案例 >

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

秦皓君
2023-12-01

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有关系

  1. 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;

 类似资料: