来自up主老橘长
“浪漫的不是海，是吹海风的我们”
结构伪类选择器和伪元素选择器
通过
结构伪类选择器在HTML中定位元素
结构伪类选择器
结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素
- 优点：
从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。
| 选择器 | 功能描述 |
|---|---|
| E:first-child{ } | 选择父元素中的第一个子元素，并且是E元素 |
| E:last-child{ } | 选择父元素中最后一个子元素，并且是E元素 |
| E:nth-child(n){ } | 选择父元素中第n个子元素，并且是E元素 |
| E:nth-last-child(n){ } | 选择父元素中倒数第n个子元素，并且是E元素 |
:first-child 和 :last-child分别用于选择元素的子元素中，符合条件的第一个和最后一个子元素。
<style>
li{
list-style: none;
display:inline ;
font-size: 20px;
}
.tab li:first-child{
color: aquamarine;
}
.tab li:last-child{
color: blue;
l
}
</style>
<body>
<ul class="tab">
<li>个人介绍</a></li>
<li>博客中心</a></li>
<li>联系我</a></li>
<li>我的动态</a></li>
<li>我所喜爱的事物</a></li>
</ul>
</body>
关于E:nth-child(n)
E:nth-child(n) 用于选择某个父元素的一个或多个特定的子元素。n 表示不确定的数字，th 是英语中序数词的后缀，
nth-child 表示第 n 个子元素。对于 n 可以是数字、公式或关键字
-
数字：可以是任何大于 0 的正整数。如上述代码中.tab li:nth-child(3)，表示选择 class 为 .tab类 的父元素下，第 3个 li 子元素。
-
公式：格式为 (an + b)。其中，a表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。如，
- :nth-child(n+2) 选取序号大于等于 4 的元素，
- :nth-child(-n+4) 选取序号小于等于 4 的元素，
- :nth-child(2n)选取序号为偶数的元素，
- :nth-child(2n+1) 选取序号为奇数的元素，
- :nth-child(3n)选取序号为3、6、9…的子元素（即“隔二选一”），
- :nth-child(3n+1) 选取序号为1、4、7、10…的子元素，等等。
- 关键字：只有odd 和 even 两个关键字。
odd表示选取序号为奇数的元素，效果等同于 :nth-child(2n-1) 和 :nth-child(2n+1)；
even表示选取序号为偶数的元素，效果等同于 :nth-child(2n)。
<style>
li{
list-style: none;
display:inline ;
font-size: 20px;
}
.tab li:nth-child(3){
color: brown;
}
</style>
</head>
<body>
<ul class="tab">
<li>个人介绍</a></li>
<li>博客中心</a></li>
<li>联系我</a></li>
<li>我的动态</a></li>
<li>我所喜爱的事物</a></li>
</ul>
</body>
除了这四个，还有其他许多个伪类选择器这里我以后可能会讲到
本来只想笔记说一下结构伪类选择器，然后看着看着又看到伪元素选择器，我靠，这又是啥，这我也要弄懂呀。只好又在标题加了个伪元素选择器
CSS3中伪类和伪元素的语法不同； 伪类 :link :hover 伪元素 ::before ::after
伪元素选择器
这里我看到一位博主是这样说的，
伪类和伪元素的区别，其实很简单，从字面上就可以理解。它们有一个共同的修饰词“伪”，那么“伪”是什么意思呢？就是假的呗。
所以，伪类就是假的类，伪元素就是假的元素，这就是在字面上它们之间的区别。
伪类就是假的类
伪类在于，我们要对特定标签设置样式和效果，我们就要使用标签选择器呀，类选择器呀。。。这些，但是当代码过多，结构过多，嵌套等等，这里就可以使用伪类选择器，相当于创建一个假的类，对特定标签设置样式和效果
伪元素
伪元素用于某些选择器设置特殊效果
区别：
- 元素：HTML设置的标签
- 伪元素：由css模拟出的标签效果
| 伪元素 | 描述 |
|---|---|
| ：：before | 在父元素内容最前面添加一个伪元素 |
| ：：after | 在父元素内容的最后添加一个伪元素 |
需要注意：
- 必须设置content属性才能生效
- 伪元素默认是行内元素
伪元素可以创建一些文档语言无法创建的虚拟元素。
- 比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。
同时，伪元素还可以创建源文档不存在的内容，
- 比如使用 ::before 或 ::after。
<style>
ul li::before{
content:"MU-haha大叔>>";
padding-left: 8px;
color: #424242;
}
li{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>我的主页</li>
<li>我的博客</li>
<li>我的空间</li>
</ul>
</body>
伪类与伪元素的特性及其区别：
-
伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
-
伪元素本质上是创建了一个有内容的虚拟容器；
-
CSS3中伪类和伪元素的语法不同；伪类用单冒号
:表示；而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。 -
可以同时使用多个伪类，而只能同时使用一个伪元素；
这里有一个DMO树结构需要我们去了解
来一个来链接，DMO树结构
然后还有一些知识点来自这个博主，伪元素与伪类元素的区别
再来一个链接，伪类和伪元素的区别
伪类和伪元素的区别
谢谢这个博主。嘻嘻嘻，三人行必有我师焉。
唉，感觉这篇文章有许多不足之处，
对于这篇学习笔记就暂时到这了，兄弟们加油❤️🤣😂😊😘💕😍😒
从现在做起，坚持下去，一天进步一小点，不久的将来，你会感谢曾经努力的你！
👩🔧👨🔧🧑🔧
如果有出错的，请各位友友指正
2835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
