【前言】
今天学生练习项目遇到不少问题,这里列举一个: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; }
效果如下:
.
相关推荐
在jQuery中,`:last-child`选择器是一种非常实用的...通过熟练掌握`:last-child`以及其他类似的选择器,如`:first-child`、`:nth-child(n)`等,你可以编写出更加优雅和高效的jQuery代码,提高网页的交互性和用户体验。
这类选择器包括但不限于 `:first-child`、`:last-child`、`:nth-child()`、`:nth-last-child()`、`:nth-of-type()` 和 `:nth-last-of-type()` 等。 #### 三、具体选择器详解 ##### 1\. `:first-child` `:first-...
此外,虽然不适用于IE8,但这里也提及了一些其他CSS3选择器,如`nth-of-type()`、`:first-of-type`、`:last-of-type`、`:only-of-type`、`:nth-last-child()`和`:nth-last-of-type()`。这些选择器允许更精确地定位...
代码如下:$(“li:only-child”).css(“color”,”blue”) 以上代码能够将只有一个li元素的ul元素下的li元素中的字体颜色设置为蓝色。 注意:这里有必要结合上面的代码再对概念进行一下说明。这里所说的父元素并不是...
HTML5和CSS3是现代网页制作的核心技术,其中CSS3的结构化伪类选择器是增强网页样式控制的重要工具。这些选择器允许开发者更精确地定位和应用样式,提高页面设计的灵活性和可维护性。 首先,`:root`选择器用于选取...
在实际应用中,`:nth-child(n)`经常与伪类如`:hover`、`:active`和`:focus`结合使用,以实现更精细的交互效果。同时,`:nth-child(n)`还可以与其他CSS选择器一起使用,如类选择器 `.class` 或 ID 选择器 `#id`,以...
接下来,我们将逐一解析文中提到的几种结构化伪类选择器,并详细介绍其应用场景和实际操作方法。 ### 1. :root 选择器 `:root` 选择器用于匹配文档的根元素。在HTML文档中,根元素始终是 `<html>` 元素。这意味着...
### CSS 伪类全解析:深入探索选择器的隐藏力量 **CSS(Cascading Style Sheets,层叠样式表)**是一种用于描述网页元素样式的语言。它允许网页设计师和开发者控制网页的布局、颜色、字体和其他视觉方面的特性。...
CSS3伪类选择器 E:root 根选择器,它的意思是匹配元素E所在文档的根元素,在HTML文档中,根元素始终是 E:not 否定选择器,它和JQuery中的:not选择器一模一样,可以选择除某个元素以外的元素, E:first-child 第...
本示例将详细介绍如何利用jQuery结合CSS的`:last-child`伪类选择器来选取并操作页面上的最后一个子元素。`:last-child`伪类在CSS中用于选取其父元素的所有子元素中的最后一个子元素。 首先,让我们理解一下标题和...
1. **结构伪类选择器**:如`:first-child`、`:last-child`、`:nth-child(n)`和`:nth-last-child(n)`,它们可以根据元素在兄弟元素中的位置进行选择和样式设置。 示例: - `: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元素中倒数第...
3. **利用伪类和计算**:对于每一行固定列数的情况,你可以使用CSS的`:nth-child()`伪类结合计算来调整最后一行元素的`margin-right`。例如,如果每行3列,你可以选择最后一个在第二列的元素(`li:last-child:nth-...
同时介绍了各种常用的结构伪类选择符,比如:nth-child, :nth-last-child, :nth-of-type等的应用场景,并对它们的不同之处做出对比解说。 适合作为基础知识点的学习材料用于Web前端新手,或是希望掌握Emmet快捷编码...
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
根据提供的文件信息,这里将对CSS选择器进行详细介绍。CSS(层叠样式表)是一种用于定义HTML或XML文档中元素的外观的语言。选择器是CSS的核心部分,它们定义了哪些HTML元素应该应用样式规则。 ### CSS选择器速查表 ...
- `:nth-child(an+b)`:更复杂的结构伪类,选取父元素的第an+b个子元素。 - `:nth-last-child(an+b)`:与`:nth-child()`类似,但从后向前计算。 - `:only-child`:选取父元素唯一的一个子元素。 - `:only-of-...