html5第八课时，结构伪类选择器

最新推荐文章于 2021-07-15 11:28:27 发布

甲戌天火

最新推荐文章于 2021-07-15 11:28:27 发布

阅读量365

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_36872096/article/details/71775582

版权

HTML5 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*li:nth-child(2n){
            color: red;/!*偶数行*!/
        }
        li:nth-child(2n+1){
            color: #f2ad0a;/!*奇数行*!/
        }*/
        li:first-child{
            color: #f2ad0a;
        }
        li:last-child{
            color: #f2ad0a;
        }
        li:nth-last-child(2){
            color: red;/*倒着数*/
        }
        p:nth-of-type(2){
            color: red;/*让p的第二行显示红色*/
        }
    </style>
</head>
<body>
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>
<p>段落1</p>
<div>伪段落</div>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</body>
</html>