css – ：last-child伪类混淆（css伪类hover）

25-04-03 4

这篇文章主要围绕css–：last-child伪类混淆和css伪类hover展开，旨在为您提供一份详细的参考资料。我们将全面介绍css–：last-child伪类混淆的优缺点，解答css伪类hover

这篇文章主要围绕css – ：last-child伪类混淆和css伪类hover展开，旨在为您提供一份详细的参考资料。我们将全面介绍css – ：last-child伪类混淆的优缺点，解答css伪类hover的相关问题，同时也会为您带来(CSS):last-child 不起作用的原因、(CSS):last-child 与:last-of-type 区别、:nth-child/:first-child/:last-child 选择器易错点、CSS last-child(-1)的实用方法。

本文目录一览：

css – ：last-child伪类混淆（css伪类hover）
(CSS):last-child 不起作用的原因
(CSS):last-child 与:last-of-type 区别
:nth-child/:first-child/:last-child 选择器易错点
CSS last-child(-1)

css – ：last-child伪类混淆（css伪类hover）

在 this JSFiddle中,最后一个.tab类没有获得正确的border-radius效果(右上角的圆角).

我认为我的逻辑是正确的：在这种情况下,last-child选择.tab的最后一个.tab.

我究竟做错了什么？

CSS：

body {
    background: black;
    color: white;
    padding: 5px; }

.tabbed {
    height: 550px;
}

.tabbed .tab {
    padding: 6px 14px;
    background: rgba(255,255,0.25);
    border: 1px solid rgba(255,0.4);
    border-radius: 0px;
    border-left-width: 0;
    float: left;
}

.tabbed .tab:first-child {
    border-radius: 3px 0 0 0;
    border-left-width: 1px;
}

.tabbed .tab:last-child {
    border-radius: 0 3px 0 0;
}

HTML：

<ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    <li> <br/><br/> </li>
    <li>Content 1</li>
    <li>Content 2</li>
    <li>Content 3</li>
    <li>Content 4</li>
    <li>Content 5</li>
</ul>

解决方法

在评论中,你说：“它需要在同一个ul父级.或者另一个ul,低于第一个ul的最后一个li.”如果是这样,那么这样做：

<ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    <li>
    <ul>
    <li>Content 1</li>
    <li>Content 2</li>
    <li>Content 3</li>
    <li>Content 4</li>
    <li>Content 5</li>
    </ul>
    </li>
</ul>

然后这个css(使用现代浏览器)：

.tabbed {
height: 550px; }

.tabbed .tab {
padding: 6px 14px;
background: rgba(255,0.25);
border: 1px solid rgba(255,0.4);
border-radius: 0px;
border-left-width: 0;
float: left; }

.tabbed .tab:first-child {
border-radius: 3px 0 0 0;
border-left-width: 1px; }

.tabbed .tab:nth-last-child(2) {
border-radius: 0 3px 0 0; }

.tabbed li:last-child {
   clear: left;
}

见this fiddle.

(CSS):last-child 不起作用的原因

今天写了个 CSS 的测试样例，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪类选择器</title>
    <style type="text/css">
        .div-01:last-child{
            color: red;
        }
    </style>
</head>
<body>
    <div class="div-01">
        <p class="p-01">
            同
        </p>
    </div>

    <div class="div-01">
        <p class="p-01">
            志
        </p>
    </div>

    <div class="div-01">
        <p class="p-01">
            们
        </p>
    </div>
    <p>
        辛
    </p>

    <p>
        苦
    </p>
</body>
</html>

原本觉着，选择器会选中

    <div class="div-01">
        <p class="p-01">
            们
        </p>
    </div>

可结果出乎我的意料，我们重新理解一下 last-child 选择器，在 CSS 标准中的含义

:last-child    p:last-child    选择属于其父元素最后一个子元素每个 <p> 元素。

选择其父元素最后一个子元素，每个 <p> 元素，根据这段话我们能否发现：div-01 对应父元素是 body，而 body 最后一个子元素是

    <p>
        苦
    </p>

而我的选择器是：

.div-01:last-child

p 对应的类与选择器不匹配，自然就选择不上了。

(CSS):last-child 与:last-of-type 区别

对比了一下 W3CSchool 中针对伪类选择器 :last-child 以及 :last-of-type 的描述，如下：

:last-child      p:last-child      选择属于其父元素最后一个子元素每个 <p> 元素。
:last-of-type    p:last-of-type    选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

说句老实话，在不懂这两个关系的时候，越看这两句描述，越是别扭，绕口，难懂，查阅网上资料搞懂了以后，就觉得说的还是蛮有道理的。

以一段代码为例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>last-child 和 last-of-type区别</title>
    <style type="text/css">
        p:last-child{
            color: red;
        }

        p:last-of-type{
            color: blue;
        }

    </style>
</head>
<body>
    <div>
        <p>第一行</p>
        <p>第二行</p>
        <p>第三行</p> 
        <span>我是测试行</span>
    </div> 
</body>
</html>

运行的结果显示：没有任何一行显示为红色，第三行显示为蓝色。或许你可能会觉得两个选择器选中的是同一行，但是当你注释掉蓝色选择器的时候会发现，红色依然未被选中。

其实红色未被选中的原因很简单，上篇文章已经讲过，这里简单的描述一下

:last-child 选择父节点最后一个子节点，并且与选择器进行匹配，父节点 div 的最后一个节点是 span，而匹配的选择器是 p, 两者不对应所以匹配不上。

而另外一个选择器

:last-of-type 是从父节点的子节点中寻找最后一个与选择器相同的子节点，也就是说，这次寻找的并不是最后一个节点，而是最后一个 P 元素节点，所以只能找到第三行了。

:nth-child/:first-child/:last-child 选择器易错点

$("tr td:first-child").css("width","35%");

上面的代码含义是：将 tr 下的第一个 td 宽度设置为 35%

很容易让人错误地理解为，将 td 下的第一个子元素的宽度设置为 35%

CSS last-child(-1)

我正在寻找一个CSS选择器，让我选择列表的前最后一个孩子。

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li> <!-- select the pre last item dynamically no matter how long this list is -->
     <li>6</li>
</ul>

静态方法：

ul li:nth-child(5)

动态方法：

ul li:last-child(-1)

这当然不验证，也nth-last-child似乎不提供一个动态的方式..我可以回退到javascript，但我想知道是否有一个css的方式我忽略

解决方法

你可以使用 :nth-last-child();事实上，除了 :nth-last-of-type()我不知道你还能使用什么。我不知道你是什么意思是“动态的”，但如果你的意思是样式是否适用于新的第二个孩子，当更多的孩子被添加到列表，是的，它会的。 Interactive fiddle.

ul li:nth-last-child(2)

我们今天的关于css – ：last-child伪类混淆和css伪类hover的分享就到这里，谢谢您的阅读，如果想了解更多关于(CSS):last-child 不起作用的原因、(CSS):last-child 与:last-of-type 区别、:nth-child/:first-child/:last-child 选择器易错点、CSS last-child(-1)的相关信息，可以在本站进行搜索。

本文标签：