CSS 基础选择器、组合选择器、属性选择器、伪类选择器、伪元素、CSS3属性选择器(2)

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• E[att~=“value”]，选择所有具有att属性，且att属性的其中一个值为value的E元素

举例：

所有具有title属性的元素：

*[title] {color:red};

所有具有href属性的a元素:

a[href] {color:red};

所有具有href属性和title属性的a元素 （可以选择有多个属性的元素）

a[href][title] {color:red};

选择属性有具体值的元素：

a标签的href属性和title属性得完全匹配

html代码：

baidu

sina

csdn

CSS代码：

a[href=“http://www.csdn.com.cn/”][title=“csdn”] {color:red};

选择了具有href属性和title属性，且href的value为http://www.csdn.com.cn/，title的value为csdn的a元素。

选择属性包含某一值的元素：

说明：只要p元素包含了title1，就会被选择

I will be choosen!

p[title ~= “title1”] {color:red};

总结：

1. 可以选择具有某一属性的所有元素或特定某类元素

2. 可以选择具有多个属性的所有元素或特定某类元素

3. 可以选择属性为具体某个值的元素

4. 可以选择属性包含某个值的元素

伪类选择器

====================================================================

链接伪类

---

• 按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元素？

没关系，可以按下面去的表述去尝试理解：

1. 首先，可以明确的是，p:first-child所要匹配的一定是p元素

2. 再者，判断该p元素是否是其父元素的第一个子元素

3. 如果是，那么就匹配；否则不匹配

先看第一个例子：

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 ，如何匹配？用三句话概括其步骤：

1. 要匹配的一定是p元素

2. 能不能被匹配？取决于p是不是它父元素的第一个子元素

3. 是的话，就匹配；不是的话，就不能匹配！

类型2、div span:first-child

1. 匹配的一定是span元素

2. span元素得是它父元素的第一个子元素

3. 最后，被匹配的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 进行总结：

1. 首先，匹配的一定是span元素

2. 再者，这个span元素得是其父元素的第一个子元素

3. 最后，符合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可以好好比较一下。

这里直接作总结：

1. 选择的一定是span标签

2. span标签一定在满足一定条件的div下

3. div的条件是：div得是其父元素的第一个子元素

E是div:first-child，F是span，要找E下的所有F。

然而E就是要找div，且这个div得是其父元素的第一个子元素。

找到了这样的div，在这些div里面找所有的span标签！

伪元素

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

v下**

3. div的条件是：div得是其父元素的第一个子元素

E是div:first-child，F是span，要找E下的所有F。

然而E就是要找div，且这个div得是其父元素的第一个子元素。

找到了这样的div，在这些div里面找所有的span标签！

伪元素

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-OPtiJKrB-1715776048292)]