CSS3 结构性伪类选择器—first-child，十天精通CSS3教程-慕课网

CSS3 结构性伪类选择器—first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

示例演示

通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。

HTML代码：

<ol>
  <li><a href="##">Link1</a></li>
  <li><a href="##">Link2</a></li>
  <li><a href="##">link3</a></li>
</ol>

CSS代码：

ol > li{
  font-size:20px;
  font-weight: bold;
  margin-bottom: 10px;
}

ol a {
  font-size: 16px;
  font-weight: normal;
}

ol > li:first-child{
  color: red;
}

演示结果：

任务

在CSS选择器中第一行输入正确的代码，将无序列表的第一个项目符号设置为红色。

?不会了怎么办: first-child标签是否书写正确

问答
评论
笔记
代码

全部精华我要发布

这个是继承了吗？

已采纳回答 / 244执着

不是继承，:first-child不能理解为第一个子元素，而应该理解成第一个元素，所以，你匹配的是第一个.post类元素，并不是第一个p元素。因此，.post:first-child和.post所选择的元素是一样的。最后因为.post:first-child样式覆盖了.post，所以所有的p元素都是蓝色的

1 回答 567 浏览

2022-04-20

为甚ul > li:first-child { color: red; }对<a href="##">Link2</a>内的元素内容没有效果呢？

已采纳回答 / weixin_慕标9288677

因为first-child只对第一个子元素起作用，link2是不是第一个子元素。

2 回答 1041 浏览

2019-10-23

ol > li:first-child{ color: red; }与 li:first-child{ color: red; }有区别吗？

已采纳回答 / 慕斯3108201

li不一定都在ol里

2 回答 1031 浏览

2022-04-08

怎么将第一行全部变成红的

已采纳回答 / qq_起開始旅程_0

ul>li:first-child,. ul>li:first-child a{ }

3 回答 1637 浏览

2022-12-12

用first-child伪元素只能在ul,ol div里面用吗？

最新回答 / lyd冬月

一样可以的，是我之前有些地方弄错了。这问题不用管。

1 回答 1392 浏览

2017-02-25

:first-child的意思是，如果这个元素是它的父元素中的第一个子元素，那么就把它选上，是这么理解吧？

最赞回答 / zz_y

在第一个ul上边添加一个class就好了

6 回答 1231 浏览

2022-05-18

...

最新回答 / 魔争

<...code...>

1 回答 592 浏览

2017-02-03

通过下面的css代码的渲染，为啥只是<li></li>标签的图标变红色了，但<li></li>的子代里的<a></a>标签的文字“Link1”没有变红？css样式不是具有继承性吗？

最新回答 / LeviMaster

意思就是所写的样式，只适用于li，没有继承性，所以a不能变色

3 回答 1559 浏览

2018-09-27

看不出哪错了

已采纳回答 / rovast2

你需要在style.css中编辑代码，这样就可以了

1 回答 922 浏览

2016-10-20

ul>li 与 ul li两种写法的区别

最赞回答 / 慕村9583991

ul>li=选择ul标签下的子元素liul li=选择ul标签下的后代元素li

4 回答 4669 浏览

2018-10-19

怎样把每个圆点都变成红色呢

已采纳回答 / Code_Fulture

<ul> <li><p></p></li> </ul> li和p分别设置，百度的方法，嘿嘿

4 回答 1069 浏览

2018-09-12

为什么冒号：前不空格会使第一个点变红而空格之后会是li里面的a 全都变红啊？？？？

最新回答 / 慕粉3808401

css里面很多时候不能乱加空格，加空格表示并列。这里的情况加了空格就不匹配li了，作用类似 ul[空格]li，表并列，即ul的li与ul的firstchild应用你的样式

1 回答 892 浏览

2016-08-23

说到底，CSS3 就是新版本的 CSS（只是还没成为标准），所以所有使用 CSS 的地方，只要浏览器支持 CSS3，都可以使用 CSS3 ，并不仅仅是选择器，所有语法都是这样。 js 本身不是通过 CSS选择器来获得元素的，它是使用内置的 get 方法，但这并不妨碍你在 js 代码里使用 CSS3 的语法（比如函数里面要是需要用到 CSS的语法，就可以使用CSS3）JQuery 的语法是 Xpath 和 CSS 语法的结合，它是使用 CSS选择器的语法获得元素的，所以只要浏览器支持，就可以使用 CS...

2 回答 912 浏览

2018-04-24

颜色问题转换

最新回答 / 慕斯3035540

......

2 回答 577 浏览

2016-08-23

:first-child的真正含义？

已采纳回答 / 东城子夜

ul > li 选择了ul下的所有li元素，而ul > li:first-child 只选择了ul下的第一个li元素,你可以亲自写一下试试就明白了

5 回答 1704 浏览

2022-03-25

全部我要发布

最热最新

只看我的

6-6 CSS3...