zoukankan      html  css  js  c++  java
  • 选择器的使用(nth-child和nth-last-child选择器)

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style type="text/css">
            li:nth-child(2) {
            background-color:limegreen;
             /*从左开始计数, li:nth-child(2) 就是第2个*/
            }
            li:nth-last-child(1) {
           
            background-color:red;
            /*从last开始计数, li:nth-last-child(1) 就是倒数第一个*/
            }
        </style>
    </head>
    <body>
        <h2>列表A</h2>
        <ul>
            <li>列表项目1</li>
            <li>列表项目2</li>
            <li>列表项目3</li>
            <li>列表项目4</li>
            <li>列表项目5</li>
        </ul>
    </body>
    </html>

    效果如下:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style type="text/css">
            /*li:nth-child(2) {
            background-color:limegreen;
            从左开始计数, li:nth-child(2) 就是第2个
            }
            li:nth-last-child(1) {
           
            background-color:red;
            从last开始计数, li:nth-last-child(1) 就是倒数第一个
            }*/
             li:nth-child(odd) {
            background-color:limegreen;
            /*所以正数上去的偶数个元素*/
            }
            li:nth-last-child(even) {
           
            background-color:red;
           /*所有倒数上去的奇数个元素*/
            }
        </style>
    </head>
    <body>
        <h2>列表A</h2>
        <ul>
            <li>列表项目1</li>
            <li>列表项目2</li>
            <li>列表项目3</li>
            <li>列表项目4</li>
            <li>列表项目5</li>
        </ul>
    </body>
    </html>

    效果如下:

  • 相关阅读:
    IntelliJ IDEA 中自定义模板代码的缩写
    小猪评《101次求婚》——屌丝是否能够逆袭女神
    C#委托的理解
    ASP.NET MVC权限验证
    ASP.NET MVC 中表单的Encode及Decode
    JQuery方式验证表单和AJAX提交
    C# LIST 的各种加减
    小猪决定做一件尝试
    ASP.NET 将excel导入 sql server
    从客户端XXX中检测到有潜在危险的 Request.Form值——终极解决方案
  • 原文地址:https://www.cnblogs.com/jason-davis/p/4009691.html
Copyright © 2011-2022 走看看