first-child伪类选择器没有效果(不起作用)

我们在开发时，经常会使用到结构性伪类选择器，如 first-child（选择第一个子元素），但有时候并没有效果怎么办？

这时候你可以检查一下该元素是否有其他兄弟元素。因为当父元素的第一个子元素类型和该元素不同时，会失效。

场景举例：

<!--内容部分-->
<div class="fruits"><h3>热销水果</h3><p>鲜红透亮的樱桃</p><p>晶莹剔透的提子</p><p>脆甜多汁的西瓜</p>
</div>

/* 样式部分 */
.fruits{width:180px;padding: 20px;text-align: center;}
.fruits h3{font-size: 18px;color: limegreen;padding-bottom: 10px;}
.fruits p{padding:10px 0;border-top: 1px solid #cccccc;}
.fruits p:first-child{border-top: none;}

最后效果：

说明：可以看出最后一行样式没有起效果，原因就是P元素前面有其他元素(H3)。

解决方法一：因为p元素后面没有其他元素了，可以将 first-child 选择器改为 last-child 选择器（同时要将border-bottom改为border-bottom）

解决方法二：用一个div标签将所有的p元素包起来。如下：

<!--内容部分-->
<div class="fruits"><h3>热销水果</h3><div><p>鲜红透亮的樱桃</p><p>晶莹剔透的提子</p><p>脆甜多汁的西瓜</p></div>
</div>

最后得到我们想要的效果，如下：

希望能帮助到大家！

first-child伪类选择器没有效果(不起作用)相关推荐

属性选择器、结构伪类选择器、伪元素选择器
选择器一.属性选择器 1.E[att] 作用为:选择具有att属性的E元素. 2.E[att= "val"] 作用为:选择具有att属性,且属性值等于val的E元素:属性等于值. ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器其他伪类选择器 1.结构性 ...
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类标签选择器类选择器层级选择器(后代选择器) id选择器组选择器伪类选择器通配符选择器标 ...
《图解CSS3：核心技术与案例实战》——2.4节动态伪类选择器
本节书摘来自华章社区<图解CSS3:核心技术与案例实战>一书中的第2章,第2.4节动态伪类选择器,作者大漠,更多章节内容可以访问云栖社区"华章社区"公众号查看 2.4 ...
js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
css 伪类 disabled,css3 :enabled与:disabled伪类选择器(示例代码)
css :enabled和:disabled伪类选择器在Web表单中,有些表单元素(如输入框.密码框.复选框等)有"可用"和"不可用"这2种状态.默认情况下, ...
CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

first-child伪类选择器没有效果(不起作用)

first-child伪类选择器没有效果(不起作用)相关推荐

最新文章

热门文章