前端学习 课堂笔记 CSS篇（四）浮动

使用结构伪类选择器在HTML中定位元素

1、作用与优势:

1. 作用:根据元素在HTMIL中的结构关系查找元素
2. 优势:减少对于HTML中类的依赖，有利于保持代码整洁
3. 场景:常用于查找某父级选择器中的子元索

 2、选择器

选择器	说明
E:first-child {}	匹配父元素中第一个了元素，并且是E元素
E:1ast-child {}	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n) {}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n) {}	匹配父元素中性数第n个子元素，并且是E元素

其中n的注意点：

1. n可以为1 2 3 4 5 6 7 8 9 等等
2. 通过n组成常见公式

功能	公式
偶数	2n，even
奇数	2n+1，2n-1，odd
前五个	-n+5
第五个向后	n+5

 

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

区别：

1. 元素:HTML设置的标签
2. 伪元素:由CSS模拟出的标签效果

种类：

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

注意点：

• 必须设置content属性才能生效
• 伪元素默认是行内元素