last-child选不中倒数的C++元素不会变红只有那个nth-child(5)可以

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        h3:last-child {
            color: red;
        }
    </style>
</head>

<body>
    <h3>IOS</h3>
    <h3>JAVA</h3>
    <h3>JAVASCRIPT</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>
    <h3>C++</h3>

</body>

</html>

搜索

复制

清夏_ 2022-08-17

源自：CSS3选择器 3-8 选择练习

收起

1回答

imooc_慕慕 2022-08-17 17:46:05

同学你好，解答如下：

:last-child选择器用来匹配父元素中最后一个子元素。

由于代码结构中，h3的父元素是body，而浏览器会将script标签添加到body标签中，所以c++当前的标签不是最后一个元素，参考如下图：

如果我们用一个div包裹起来，那c++即为最后一个标签，参考如下：

祝学习愉快~

收起回答

提问者清夏_ #1

老师的意思是如果父元素是body 浏览器会自动在body标签对最后面后面创建script标签对？导致我的h3不是最后一个子元素是这个意思吗 h3用一个盒子包裹起来就好了？
搜索
复制

2022-08-17 17:53:16
imooc_慕慕回复提问者清夏_ #2

同学你好，同学理解是对的，祝学习愉快~

2022-08-17 18:15:33