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

: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 标签！

伪元素

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

::first-line

p::first-line {

color: #ff0000;

font-variant: small-caps;

}

::first-letter

p::first-letter {

color: #ff0000;

font-size: xx-large;

}

::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

• 上例使得，被用户选择的文本，字体颜色为红色，背景变成黄色。

伪类与伪元素的区别

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

区别：

1. 伪类选择器都是单冒号；伪元素是双冒号。

2. 伪类选择器用于 已有元素处于某个状态 时，为其添加特定的样式（如悬停:hover，:active）；伪元素用于 创建一些不在文档树的元素 ，为其添加样式，虽然可以看到这些新元素，但 并不在文档树中。

注意：

现在大多数浏览器还是支持双冒号或者单冒号两种方式去表示伪元素。CSS3 为了区分伪类和伪元素，伪类用单冒号，伪元素用双冒号。

CSS3 属性选择器

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

• E[att^=“val”]：属性 att 的值以 ”val” 开头的 E 元素

• E[att$=“val”]: 属性 att 的值以 ”val” 结尾的 E 元素

• E[att*=“val”]: 属性 att 的值包含 ”val” 字符串的 E 元素

优先级

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

总结：

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题 PDF 分享出来，一共有 269 页

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