CSS结构伪类选择器与浮动

结构伪类选择器

根据HTML结构选择标签,减少对类名的依赖.

结构伪类选择器的权重是0010.

<ul>
        <li>我是li里的第1个孩子</li>
        <li>我是li里的第2个孩子</li>
        <li>我是li里的第3个孩子</li>
        <li>我是li里的第4个孩子</li>
        <li>我是li里的第5个孩子</li>
        <li>我是li里的第6个孩子</li>
        <li>我是li里的第7个孩子</li>
        <li>我是li里的第8个孩子</li>
        <li>我是li里的第9个孩子</li>
        <li>我是li里的第10个孩子</li>
    </ul>

/* 匹配父元素里面的第一个孩子 */
        ul li:first-child {
            background-color: red;
        }
​
        /* 匹配父元素里面的最后一个孩子 */
        ul li:last-child {
            background-color: skyblue;
        }
        /* 匹配父元素里面的某一个孩子 */
        ul li:nth-child(6){
            background-color: purple;
        }
        /* 匹配父元素里面倒数第几个孩子 */
        ul li:nth-last-child(3){
            background-color: pink;
        }

nth-child(n)

1.n 可以是数字， 数字是几，就选择第几个孩子。

ul li:nth-child(6) { }  选择第6个孩子

2. n 还可以是 关键字 比如 odd even

     /* 选中偶数的孩子 */
           ul li:nth-child(even) {
               background-color: pink;
           }
   ​
           /* 选中奇数的孩子 */
           ul li:nth-child(odd) {
               background-color: skyblue;
           }
   ​
   

3. n 还可以是 公式。

   • n 是从 0开始 012345...
   • 2n 是 偶数
   • 2n + 1 是 奇数
   • 5n 5的倍数
   • n+5 从第五个开始 包含第五个 一直到最后.
   • -n+5 选中前5个 包含第五个

   /*2n */
   ol li:nth-child(2n) {
               background-color: tomato;
    }
   /*2n+1 */
   ol li:nth-child(2n+1){
               background-color: violet;
   }
   /*5n  */
   ol li:nth-child(5n){
               background-color: yellowgreen;
           }
   /* n+5    从第五个开始 包含第五个 一直到最后.*/
   ol li:nth-child(n+5) {
               background-color: yellowgreen;
           }
   /*-n+5   选中前5个 包含第五个*/
   ol li:nth-child(-n+5) {
               background-color: yellowgreen;
           }
   

伪元素

伪元素就是利用css来创建标签.伪元素创建出来的标签属于行内元素.

在父元素内容的最前面添加一个伪元素
E:::before{
     content: '';
}
在父元素内容的最后面添加一个伪元素
E::::after{
     content: '';
}
使用委员插入必须要指定content属性

标准流

一个完整的网页布局,只有标准流是不能满足需求,打破常规布局,让多个块级元素水平一行显示并且没有间隙.

网页布局: 标准流 + 浮动+ 定位

标准流布局规则

块级元素:

从上往下 垂直布局 独占一行

行内 /行内块元素:

从左往右 水平布局 一行转不下自动换行

浮动

浮动的作用

早期的作用:图文环绕

现在的作用: 布局页面,让垂直布局的盒子变成水平布局

浮动的特点

1 浮动元素会脱离标准流(简称脱标),不占位置,被后面的标准流占有.

<div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    * {
            margin: 0;
            padding: 0;
        }
​
        div {
            width: 200px;
            height: 200px;
        }
​
        .box1 {
            background-color: pink;
        }
​
        .box2 {
            /* 右浮动 */
            float: right;
            background-color: red;
        }
​
        .box3 {
            background-color: green;
        }

2 浮动的元素比标准流高半个级别,可以覆盖标准流的元素.

    * {
            margin: 0;
            padding: 0;
        }
​
        div {
            width: 200px;
            height: 200px;
        }
​
        .box1 {
            background-color: pink;
        }
​
        .box2 {
            /* 左浮动 */
            float: left;
            background-color: red;
        }
​
        .box3 {
            padding: 40px;
            background-color: green;
        }
​

3. 浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动

       * {
               margin: 0;
               padding: 0;
           }
   ​
           div {
               float: left;
               width: 200px;
               height: 200px;
           }
   ​
           .box1 {
               background-color: pink;
           }
   ​
           .box2 {
               background-color: red;
           }
   ​
           .box3 {
               background-color: green;
           }
   

   4 浮动的元素会受到上面元素边界的影响

       * {
               margin: 0;
               padding: 0;
           }
   ​
           div {
               width: 200px;
               height: 200px;
           }
   ​
           .box1 {
               background-color: pink;
           }
   ​
           .box2 {
               /* 右浮动 */
               float: right;
               background-color: red;
           }
   ​
           .box3 {
               background-color: green;
           }
   

   5. 浮动的元素有特殊效果(浮动元素具有行内块元素特性并且顶部对齐.)

   一行可以显示多个,可以设置宽高

   块级元素浮动之后不设置宽高,默认由内容撑开

   行内元素浮动之后设置宽高有效

    * {
               margin: 0;
               padding: 0;
           }
   ​
           div {
               float: left;
               width: 200px;
               height: 200px;
           }
   ​
           .box1 {
               background-color: pink;
           }
   ​
           .box2 {
               background-color: red;
           }
   ​
           .box3 {
               background-color: green;
           }
   ​
           span {
               float: left;
               width: 200px;
               height: 200px;
               background-color: purple;
           }
   ​
           p {
               width: 200px;
               height: 200px;
               float: left;
               background-color: yellow;
           }
   

    <div class="box1"></div>
       <div class="box2"></div>
       <div class="box3"></div>
       <span>设置宽高有效</span>
       <p>块级元素浮动之后不设置宽高默认由内容撑开</p>
   

   浮动注意事项:

   1 浮动的盒子搭配标准流的父元素一起使用.(标准流:垂直布局 ;浮动:水平布局)

   2 浮动的时候,当父元素装不下浮动的子元素,此时子元素会换行显示.

   3 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

   子浮父不浮 兄弟一起浮 一浮全浮