`

css 伪类:last-child等不起作用

阅读更多

【前言】

    今天学生练习项目遇到不少问题,这里列举一个: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选择器用法实例

    在jQuery中,`:last-child`选择器是一种非常实用的...通过熟练掌握`:last-child`以及其他类似的选择器,如`:first-child`、`:nth-child(n)`等,你可以编写出更加优雅和高效的jQuery代码,提高网页的交互性和用户体验。

    选择器(css3/css2)

    这类选择器包括但不限于 `:first-child`、`:last-child`、`:nth-child()`、`:nth-last-child()`、`:nth-of-type()` 和 `:nth-last-of-type()` 等。 #### 三、具体选择器详解 ##### 1\. `:first-child` `:first-...

    IE8下CSS3选择器nth-child() 不兼容问题的解决方法

    此外,虽然不适用于IE8,但这里也提及了一些其他CSS3选择器,如`nth-of-type()`、`:first-of-type`、`:last-of-type`、`:only-of-type`、`:nth-last-child()`和`:nth-last-of-type()`。这些选择器允许更精确地定位...

    jQuery中:only-child选择器用法实例

    代码如下:$(“li:only-child”).css(“color”,”blue”) 以上代码能够将只有一个li元素的ul元素下的li元素中的字体颜色设置为蓝色。 注意:这里有必要结合上面的代码再对概念进行一下说明。这里所说的父元素并不是...

    HTML5&CSS3网页制作:结构化伪类选择器.pptx

    HTML5和CSS3是现代网页制作的核心技术,其中CSS3的结构化伪类选择器是增强网页样式控制的重要工具。这些选择器允许开发者更精确地定位和应用样式,提高页面设计的灵活性和可维护性。 首先,`:root`选择器用于选取...

    使用css属性:nth-child(n)匹配选择第n个子元素

    在实际应用中,`:nth-child(n)`经常与伪类如`:hover`、`:active`和`:focus`结合使用,以实现更精细的交互效果。同时,`:nth-child(n)`还可以与其他CSS选择器一起使用,如类选择器 `.class` 或 ID 选择器 `#id`,以...

    使用HTML开发商业网站-结构化伪类选择器课件.pptx

    接下来,我们将逐一解析文中提到的几种结构化伪类选择器,并详细介绍其应用场景和实际操作方法。 ### 1. :root 选择器 `:root` 选择器用于匹配文档的根元素。在HTML文档中,根元素始终是 `&lt;html&gt;` 元素。这意味着...

    CSS伪类全解析:深入探索选择器的隐藏力量

    ### CSS 伪类全解析:深入探索选择器的隐藏力量 **CSS(Cascading Style Sheets,层叠样式表)**是一种用于描述网页元素样式的语言。它允许网页设计师和开发者控制网页的布局、颜色、字体和其他视觉方面的特性。...

    CSS3伪类选择器;例如:E:root、E:not等等

    CSS3伪类选择器 E:root 根选择器,它的意思是匹配元素E所在文档的根元素,在HTML文档中,根元素始终是 E:not 否定选择器,它和JQuery中的:not选择器一模一样,可以选择除某个元素以外的元素, E:first-child 第...

    jQuery+css last-child实现选择最后一个子元素操作示例

    本示例将详细介绍如何利用jQuery结合CSS的`:last-child`伪类选择器来选取并操作页面上的最后一个子元素。`:last-child`伪类在CSS中用于选取其父元素的所有子元素中的最后一个子元素。 首先,让我们理解一下标题和...

    CSS3课件.docx

    1. **结构伪类选择器**:如`:first-child`、`:last-child`、`:nth-child(n)`和`:nth-last-child(n)`,它们可以根据元素在兄弟元素中的位置进行选择和样式设置。 示例: - `:first-child`选择父元素的第一个子元素...

    用css完成根据子元素不同书写样式的方法

    &:last-child:nth-child(1) { // 相关样式 } } 很好理解:div下面即是最后一个元素也是第一个元素不就是只有一个子元素吗? 用css选择器匹配只有两个子元素 div{ &:nth-last-child(2):nth-child(2) { } } 依样...

    HTML5/CSS餐厅练习.rar

    #fancy :last-child,pickle:last-child id为fancy的元素的最后一个和pickle元素的最后一个 第十八关 div plate:nth-child(3) div元素中的第三个plate元素 第十九关 div bento :nth-last-child(4) div元素中倒数第...

    css3 flex布局 justify-content:space-between 最后一行左对齐

    3. **利用伪类和计算**:对于每一行固定列数的情况,你可以使用CSS的`:nth-child()`伪类结合计算来调整最后一行元素的`margin-right`。例如,如果每行3列,你可以选择最后一个在第二列的元素(`li:last-child:nth-...

    Emmet语法与CSS结构伪类详细介绍

    同时介绍了各种常用的结构伪类选择符,比如:nth-child, :nth-last-child, :nth-of-type等的应用场景,并对它们的不同之处做出对比解说。 适合作为基础知识点的学习材料用于Web前端新手,或是希望掌握Emmet快捷编码...

    详解如何使用CSS3中的结构伪类选择器和伪元素选择器

    结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...

    Css Selectors Cheatsheet

    根据提供的文件信息,这里将对CSS选择器进行详细介绍。CSS(层叠样式表)是一种用于定义HTML或XML文档中元素的外观的语言。选择器是CSS的核心部分,它们定义了哪些HTML元素应该应用样式规则。 ### CSS选择器速查表 ...

    第36章 CSS3中新增的属性选择器

    - `:nth-child(an+b)`:更复杂的结构伪类,选取父元素的第an+b个子元素。 - `:nth-last-child(an+b)`:与`:nth-child()`类似,但从后向前计算。 - `:only-child`:选取父元素唯一的一个子元素。 - `:only-of-...

Global site tag (gtag.js) - Google Analytics