总结：
-
可以选择具有某一属性的所有元素或特定某类元素
-
可以选择具有多个属性的所有元素或特定某类元素
-
可以选择属性为具体某个值的元素
-
可以选择属性包含某个值的元素
伪类选择器
====================================================================
链接伪类
-
按link、visited、hover、active的顺序
-
link表示未访问时的状态
-
visited表示访问过的状态
-
hover表示鼠标悬停在上面时的状态
-
active表示鼠标已经按下但未释放时的状态
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
:first-child 伪类
类型1、p:first-child
官方定义好像不是太好理解？到底如何匹配p元素？
没关系，可以按下面去的表述去尝试理解：
-
首先，可以明确的是，p:first-child所要匹配的一定是p元素
-
再者，判断该p元素是否是其父元素的第一个子元素
-
如果是，那么就匹配；否则不匹配
先看第一个例子：
p:first-child{ color:red; }
1
2
3
4
结果：1和3会变成红色，2和4不会变成红色。为什么呢？
原因：
-
1和2中：1所在的p元素，是父元素body元素的第一个子元素，故被选择；而2所在的p元素，则不是body元素的第一个子元素，而是第二个子元素，所以没匹配。
-
3和4中：3所在的p元素，是div元素的第一个子元素，故被选择；4所在的p元素，是div元素的第二个子元素，所以没有被选择
那如果稍作修改：
1
2
3
4
1还是变成红色，3也是变成红色，2和4还是不变。想想为什么？
那如果是这样呢？
1
2
4
3
由上到下显示的是1243。其中1，4，3是红色。
原因：
-
4所在的p元素，能不能被匹配，就看这个p元素是不是其div父元素的第一个子元素。是的，所以它变成红色了。
-
3所在的p元素，其父元素实际上是内层div，它也是内层div的第一个子元素，所以，3也是红色。
对于 p:first-child ，如何匹配？用三句话概括其步骤：
-
要匹配的一定是p元素
-
能不能被匹配？取决于p是不是它父元素的第一个子元素
-
是的话，就匹配；不是的话，就不能匹配！
类型2、div span:first-child
-
匹配的一定是span元素
-
span元素得是它父元素的第一个子元素
-
最后，被匹配的span，得在div下面（E F组合选择器）
div span:first-child { color:red; }
先看一个例子，然后再分析到底是怎么匹配的
1
2
结果：1变红色，2不变。
原因：
-
1所在的span元素，是其父元素div的第一个子元素。同时它也是在div下面，所以被匹配。
-
2所在的span元素，它不是父元素div的第一个子元素，是第二个。不满足第二点条件。
修改一下：
1
2
3
结果：1和2都变成红色了
原因：
-
2所在的span，它的父元素是第二层div，而且也确实是该父元素的第一个子元素。也是在div下的。
-
但是3所在的span，不是第二层div的第一个子元素。故没有匹配。
再修改一下：
2
1
结果：2是红的，1不是红的。
原因：
- 1所在的span，并不是其父元素的第一个子元素。（其子元素是第一层div）
再修改一下！
2
1
结果：1变回红色了！
原因：1所在的span，其父元素是p，那么它确实是父元素的第一个子元素。而且也是在div下的。所以它是红色的。
对于 div span:first-child 进行总结：
-
首先，匹配的一定是span元素
-
再者，这个span元素得是其父元素的第一个子元素
-
最后，符合1,2条件的span元素，得在div下。（类似E F选择器，F相当于span:first-child，E相当于div。E F选择器选的是E下的所有F，所以选的是div下的所有 span:first-child）
类型3、div:first-child span
关于类型3，和类型2可以好好比较一下。
这里直接作总结：
-
选择的一定是span标签
-
span标签一定在满足一定条件的div下
-
div的条件是：div得是其父元素的第一个子元素
E是div:first-child，F是span，要找E下的所有F。
然而E就是要找div，且这个div得是其父元素的第一个子元素。
找到了这样的div，在这些div里面找所有的span标签！
伪元素
==================================================================
::first-line
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
-
::first-line只作用于块级元素
-
如上例，所有p元素的首行（first-line），都添加上了属性
::first-letter
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
-
::first-letter只作用于块级元素
-
如上例，所有p元素的首字母（first-letter），都添加上了属性
::before
h1::before {
content: url(smiley.gif);
}
- ::before 伪元素可用于在元素内容之前插入一些内容。
::after
h1::after {
content: url(smiley.gif);
}
- ::after 伪元素可用于在元素内容之后插入一些内容。
::selection
::selection {
color: red;
background: yellow;
}
-
匹配用户所选定的元素部分
-
可用color,background,cursor,outline
-
上例使得，被用户选择的文本，字体颜色为红色，背景变成黄色。
伪类与伪元素的区别
========================================================================
区别：
-
伪类选择器都是单冒号；伪元素是双冒号。
-
伪类选择器用于已有元素处于某个状态时，为其添加特定的样式（如悬停:hover，:active）；伪元素用于创建一些不在文档树的元素，为其添加样式，虽然可以看到这些新元素，但并不在文档树中。
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。
3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**
[外链图片转存中…(img-cYHX58ze-1712869518842)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。
[外链图片转存中…(img-ZRSeuXzW-1712869518842)]
