first-child，first-of-type,nth-child(),nth-of-type

老师为啥第二个标签好像跟消失了一样，是因为<span>嵌套的原因吗？麻烦老师了

键盘上的莫扎特 2019-07-23

源自：CSS网页布局基础 2-10 编程练习

收起

2回答

好帮手慕码 2019-07-24 09:43:58

同学你好！

用户“gao031”的回答很对，因为第一个p标签没有正确的关闭：

如果帮助到了你欢迎采纳祝学习愉快~

收起回答

提问者键盘上的莫扎特 2019-07-23 20:54:43

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器测试</title>
    <style type="text/css">
        div p:first-child{
            background: red;
        }
        div p:last-of-type{
            background: orange;
        }   
        div p:nth-child(2){
            background: yellow;
        }
        div p:nth-of-type(4){
            background:blue;
        }
    </style>
</head>
<body>
    <div>
        <p>课程推荐<p>
        <p><span>职业路径</span>&nbsp;HTML5与CSS3实现动态网页</p>
        <p><span>职业路径</span>&nbsp;零基础入门Android语法与界面</p>
        <p><span>职业路径</span>&nbsp;ios基础语法与常用控件</p>
        <p><span>职业路径</span>&nbsp;PHP入门开发</p>
        <p><span>职业路径</span>&nbsp;JAVA入门开发</p>
    </div>
</body>
</html>

收起回答