No.1.6

结构伪类选择器

根据元素在HTML中的结构关系查找元素

　　　　选择器　　　　　　　　　　　　　　说明

　　E:first-child{}　　　　　　匹配父元素中的第一个子元素，并且是E元素

　　E:last-child{}　　　　　　匹配父元素中的最后一个子元素，并且是E元素

　　E:nth-child(n){}　　　　　匹配父元素中第n个子元素，并且是E元素

　　E:nth-last-child(n){}　　　匹配父元素中倒数第n个子元素，并且是E元素

n的注意点：

　　1.n为：0、1、2、3、4、5、6、......

　　2.通过n可以组成常见公式

　　　　功能　　　　　　公式

　　　　偶数　　　　　2n、even

　　　　奇数　　　　2n+1、2n-1、odd

　　　找到前五个　　　　-n+5

　找到从第五个往后　　　 n+5

    /* 偶数 */

    /* li:nth-child(2n) { */

    /* 奇数 */

    /* li:nth-child(2n+1) { */

    /* 找到前3个 */

    /* li:nth-child(-n+3) { */

    /* 4的倍数 */

    /* li:nth-child(4n) { */

伪元素：一般页面中的非主体内容可以使用伪元素

区别：（1）元素：HTML设置的标签

　　　（2）伪元素：由CSS模拟出的标签效果

种类：　　伪元素　　　　　　　　　　作用

　　　　　::before　　　　在父元素内容的最前面添加一个伪元素

　　　　    ::after　　　　  在父元素内容的最后添加一个伪元素

必须设置content属性才能生效，伪元素默认是行内元素（content: '内容';）

  <!-- 伪元素：通过CSS创建标签，装饰性的不重要的小图 -->

  <!-- 找父级，在这个父级里面创建子级标签 -->

标准流就是标签默认的排列方式（文档流）

冗余就是重复的意思

浮动

浮动早期的作用：图文环绕

浮动现在的作用：网页布局

代码：float:left/right;

特点：浮动元素会脱离标准流（简称：脱标），在标准流中不占位置；浮动比标准流高半个级别，可以覆盖标准流的元素；浮动找浮动，下一个浮动元素会在上一个浮动元素后面浮动

浮动元素特殊显示效果：一行显示多个，可以设置宽高

/* 浮动：在一行排列，宽高生效 ---浮动后的标签具备行内块特点 */

  /* CSS书写顺序：浏览器执行效率会更高

  1.浮动 / display

  2.盒子模型：margin border padding 宽度高度背景色

  3.文字样式 */

    /* 如果父级的宽度不够，子级会自动换行 */

    /* 第四个li和第八个li右侧间距清除 */

    .right li:nth-child(4n) {

      margin-right: 0;

    }

清除浮动：清除浮动带来的影响（如果子元素浮动了，此时子元素不能撑开标准流的块级父元素）

方法1：直接设置父元素高度（简单粗鲁，方便、但是有些布局中不能固定父元素高度，如：新闻列表，京东推荐模块）

方法2：额外标签法（在父元素内容的最后添加一个块级元素，给添加的块级元素设置clear: both）(会在页面中添加额外，会让页面的HTML结构变得复杂)

方法3：单伪元素清除法（用伪元素替代了额外标签）（和额外标签法原理一样）

基本写法：

.clearfix::after {

      content: '';

      /* 伪元素添加的标签是行内的，要求是块 */

      display: block;

      clear: both;

      /* 为了兼容性 */

      height: 0;

      visibility: hidden;

    }

特点：项目中使用，直接给标签加类即可清除浮动

方法4：双伪元素清楚法

/* .clearfix::before作用：解决外边距塌陷问题

 外边距塌陷：父子标签，子级加margin会影响父级的位置 */

    /* 清除浮动 */

    .clearfix::before,

    .clearfix::after {

      content: '';

      display: table;

    }

    /* 真正清楚浮动的标签 */

    .clearfix::after {

      clear: both;

    }

特点：项目中使用，直接给标签加类即可清除浮动

方法5：给父元素设置overflow: hidden; (直接给父元素设置)方便