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: '内容';）

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

冗余就是重复的意思

浮动

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

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

代码：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; (直接给父元素设置)方便

巴特西

No.1.6

最新文章

热门文章