【前言】
今天学生练习项目遇到不少问题,这里列举一个:css 伪类:last-child等不起作用?
【详解】
首先我再强调下,伪类选择器`:first-child`和`:last-child`是根据父级进行筛选的。所以如果想对某个尾部元素设置样式,必须在之前加上父级元素。即子元素 父级元素:last-child 子元素。
<style> #icons{ border: 1px solid bisque; height: 250px; } #icons .column{//每一列 width: 25%; display: inline-block; float: left; text-align: center; } #icons .column .txt{//每列文字 width: 100%; height: 52px; margin-top: 134px; border-right: 2px solid #787b83;//在此处加隔条 } #icons .column .txt:last-child{ border-right: none; } #icons .column .txt p{ width: 160px; height: 52px; font-size: 14px; line-height: 18px; color: #767777; margin-left: 25%; }
<div id="icons"> <div class="column column1"> <div class="txt"> <p>打造全新世界观,让你更爱你的生活</p> </div> </div> <div class="column column2"> <div class="txt"> <p>丰富多彩的公益活动,发挥新世界的主人公意识</p> </div> </div> <div class="column column3"> <div class="txt"> <p>时尚的新理念,超前体验未知的生活</p> </div> </div> <div class="column column4"> <div class="txt"> <p>完善的培养机制,培养你全新的世界观</p> </div> </div> </div> </div>
效果如下:
学生一般以为在 `#icons .column .txt` 处加隔条后,想把最后一个竖隔条设为 `border:none;` 没想到如上如所示,全部都不见了。
原因在于,伪类选择器`:first-child`和`:last-child`是根据父级进行筛选的,`#icons .column .txt:last-child` 的父级是‘.txt`,在该处上的子级只有一个,最后的子级当然也是自己本身,所以要想达到效果,就应该在‘.txt`的父级添加伪类。
#icons .column:last-child .txt{ border-right: none; }
效果如下:
.
相关推荐
CSS3选择器--结构化伪类选择器;结构化伪类选择器;结构化伪类选择器;:root选择器;:not选择器;:only-child 选择器;:first-child和:last-child选择器;:nth-child(n)和:nth-last-child(n)选择器;:nth-of-type(n)和:nth-...
代码如下:$(“li:last-child”).css(“color”,”blue”) 以上代码能够将父元素下最后一个li元素中的字体颜色设置为蓝色。 注意:这里有必要结合上面的代码再对概念进行一下说明。这里所说的父元素并不是li,而是li...
代码如下:$(“li:only-child”).css(“color”,”blue”) 以上代码能够将只有一个li元素的ul元素下的li元素中的字体颜色设置为蓝色。 注意:这里有必要结合上面的代码再对概念进行一下说明。这里所说的父元素并不是...
CSS3伪类选择器 E:root 根选择器,它的意思是匹配元素E所在文档的根元素,在HTML文档中,根元素始终是 E:not 否定选择器,它和JQuery中的:not选择器一模一样,可以选择除某个元素以外的元素, E:first-child 第...
&:last-child:nth-child(1) { // 相关样式 } } 很好理解:div下面即是最后一个元素也是第一个元素不就是只有一个子元素吗? 用css选择器匹配只有两个子元素 div{ &:nth-last-child(2):nth-child(2) { } } 依样...
#fancy :last-child,pickle:last-child id为fancy的元素的最后一个和pickle元素的最后一个 第十八关 div plate:nth-child(3) div元素中的第三个plate元素 第十九关 div bento :nth-last-child(4) div元素中倒数第...
什么是结构伪类选择器? 结构伪类选择器是针对HTML的结构进行分类的选择器,特征就是位置 分为三大类 ...作用:两个css选择器通过波浪线连接起来,但只作用于后一个css选择器,并且必须出现前一个选择器才符
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
这将转换:only-child伪类选择器: . some-class , . some-other-class : only-child { color : blue; } 对于当前兼容的等效项: . some-class , . some-other-class : first-child : last-child { color : ...
* 伪类选择器: + 选中状态选择器:X:checked{} + 不可用状态选择器:X:disabled{} + 可用状态选择器:X:enabled{} + 第一个子元素选择器::first-child{ } + 最后一个子元素选择器::last-child{ } + 第 n ...
在新的标准中,单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素,我们平时开发时可以注意一下,当然大多数浏览器两种写法都能识别。 常见伪元素和伪类 伪类 :link, :visited, :hover, :active, :focus, :...
/*! * css选择器 * 冒泡原理 * 如果后面的表达式无效,只返回... * :has(selector) 【selector必须是个有效的表达式,这里不去匹配元素本身的属性,所有表达式.class等本身属性一般匹配无效】 * :not(selector) */
结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论...
html[xmlns*=""] body:last-child .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:nth-of-type(1) .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:first-of-...
如: 代码如下:$(“ul:first-child”).css(“text-decoration”, “underline”).css(“color”, “blue”); 2. :last-child选择器 用于选择其父级的最后一个子元素的所有元素,格式: 代码如下:$(“selector:last-...
使用CSS3实现的网页立体导航条, position: relative; display: inline-block; padding: 0 30px; font-size: 15px;... .nav li:last-child:after{ width: 0; height: 0; }
说到伪选择器,真的让我体会到了CSS的无比强大,强大到自己貌似都不认识CSS了,有点C# 6.0中一些语法糖带给我们的震撼。。。首先 我们可以在VS里面提前预览一下。 可以看到,上面的伪类有很多很多,多的让我眼都快瞎...
如果说 css 作为前端开发的基本功, 那么 选择器 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计. 本篇文章会直接了当的比较它们的特性, 帮助你快速的掌握它们: ...
:not 伪类选择器可以筛选不符合表达式的元素 例子 table tbody tr:not(:first-child):not(:last-child) td { text-align: right; } 以上代码可以选择table表格中tbody部分非首个、非最后一个的tr,并设置其子元素...
主要介绍了jQuery+css last-child实现选择最后一个子元素操作,结合实例形式分析了jQuery结合css进行页面元素选择与样式修改相关操作技巧,需要的朋友可以参考下