HTML5基础加强css样式篇（结构化伪类选择器：nth-of-type）（十一）

最新推荐文章于 2023-01-27 22:18:28 发布

咸鸭蛋炒饭

最新推荐文章于 2023-01-27 22:18:28 发布

阅读量1.1k

点赞数 1

分类专栏： HTML5基础篇文章标签： css 应用经验 html5 结构

本文链接：https://blog.csdn.net/u010853130/article/details/62228752

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.nth-of-type简单使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5初级阶段</title>
    <style type="text/css">
        .box {
            /*Add your CSS*/
        }
        table {
            width: 100%;
            border: 1px solid #f0f0f0;
            border-collapse: collapse;
        }
        td{
            border: 1px solid #f0f0f0;
        }
        /*
        注意：
            nth-of-type 同一层级的元素分组选择
        */
        tr:nth-of-type(even){
            background-color: yellow;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <td>item1</td>
    </tr>
    <tr>
        <td>item2</td>
    </tr>
    <tr>
        <td>item3</td>
    </tr>
    <tr>
        <td>item4</td>
    </tr>
    <tr>
        <td>item5</td>
    </tr>
</table>

<script type="text/javascript">
    //        Add your code


</script>
</body>
</html>

2.其他的使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5初级阶段</title>
    <style type="text/css">
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .box {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-family: Arial;
            font-size: 36px;
        }
        li{
            float: left;
        }

        /*让位于偶数位置的li字体显示为红色*/
        li:nth-of-type(even){
            color: red;
        }

        /*让位于奇数位置的li字体显示为蓝色*/
        li:nth-of-type(odd){
            color: blue;
        }

        /*让位于位置的的li字体显示为绿色，字体72px*/
        li:nth-of-type(8){
            color: green;
            font-size: 72px;
        }

    </style>
</head>
<body>

<ul>
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
    <li class="box">5</li>
    <li class="box">6</li>
    <li class="box">7</li>
    <li class="box">8</li>
    <li class="box">9</li>
</ul>

<script type="text/javascript">
    //Add your code


</script>
</body>
</html>

3.nth-of-type高级应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5初级阶段</title>
    <style type="text/css">
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .box {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-family: Arial;
            font-size: 36px;
        }
        li{
            float: left;
        }

        /*
           表达式： an+b

            a
                1.分组的方向（正数 从左向右，反之从右向左）
                2.几个元素一组

           b
                分组的起始位置（如果是负数，浏览器默认补齐）

        */
        li:nth-of-type(5n + 2){
            color: red;
        }


    </style>
</head>
<body>

<ul>
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
    <li class="box">5</li>
    <li class="box">6</li>
    <li class="box">7</li>
    <li class="box">8</li>
    <li class="box">9</li>
</ul>

<script type="text/javascript">
    //Add your code


</script>
</body>
</html>

4.nth-of-type实际应用：画测量尺：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5初级阶段</title>
    <style type="text/css">
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .box{
            width: 2px;
            height: 10px;
            background-color: #000;
            float: left;
            margin-right: 4px;
        }
        .box:nth-of-type(5n){
            height: 16px;
        }

    </style>
</head>
<body>
<ul class="rule">
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
</ul>

<script type="text/javascript">



</script>
</body>
</html>

咸鸭蛋炒饭

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5基础加强css样式篇（结构化伪类选择器：nth-of-type）（十一）

1.nth-of-type简单使用： HTML5初级阶段 .box { /*Add your CSS*/ } table { width: 100%; border: 1px solid #f0f0f0; border-
复制链接

扫一扫