<!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>

效果如下：

选择器的使用(nth-child和nth-last-child选择器)的更多相关文章

  1. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  2. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  3. 请写出css中选择器（元素选择器、类选择器、id选择器）的优先级顺序，和当各种选择器组合时，优先级的计算规则是什么？

    id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...

  4. 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器

    × 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态 前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当 ...

  5. 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

    × 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...

  6. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  7. 安卓自己定义对话框及The specified child already has a child问题

    问题:在android开发过程中,有时会在不同情况下遇到同种问题:The specified child already has a parent.You must call removeView() ...

  8. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

  9. [Swift]LeetCode400. 第N个数字 | Nth Digit

    Find the nth digit of the infinite integer sequence 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ... Note:n is ...

  10. Sass函数：列表函数nth

    语法: nth($list,$n) nth() 函数用来指定列表中某个位置的值.不过在 Sass 中,nth() 函数和其他语言不同,1 是指列表中的第一个标签值,2 是指列给中的第二个标签值,依此类 ...

随机推荐

  1. 波哥！一个不安分的IT男

    第一篇博文,紧张,窃喜,辣眼睛! 这个订阅号主要是写给自己的,近期越来越发现记忆力不如以前了! 时光如梭,岁月荏苒,或许这两句经典的开头文比较契合自己的年纪.依稀记得几年前还在组装服务器.搬机柜.做系 ...

  2. 在Windows7下编译调试C#程序

    要在 命令行下编译C#代码,要配置一下 1.在环境变量下新建一个变量 参数名: csc 参数值:C:\Windows\Microsoft.NET\Framework\v4.0.30319 2.在系统变 ...

  3. 解决qt提示：qt.network.ssl: QSslSocket: cannot call unresolved function DH_free和qt.network.ssl: QSslSocket: cannot call unresolved function d2i_DHparams

    转载请注明出处:https://i.cnblogs.com/EditPosts.aspx?postid=7127254 运行环境:VS2015&Qt5.8 方法一(未能解决):把C:\Qt\Q ...

  4. CSS中常用属性之字体属性

    1,以下是CSS中常用字体属性: font-family             字体样式 font-size                字体大小 font-size-adjust  为元素规定 ...

  5. PHP面向对象考察点

    面向对象三大特性 封装 封装性就是把对象的属性和服务结合成一个独立的相同单位,并尽可能隐蔽对象的内部细节,包含两个含义: 把对象的全部属性和全部服务结合在一起,形成一个不可分割的独立单位(即对象). ...

  6. HDU_1710_二叉树前序中序确定后序

    2018-3-6 按照王道机试书上的思路再做了一遍,先根据先序和中序建树,然后后序遍历. 静态分配数组用于建树,可以返回数组地址当作结点指针. #include<iostream> #in ...

  7. mysql中 for update 使用

    解释: for update是在数据库中上锁用的,可以为数据库中的行上一个排它锁.当一个事务的操作未完成时候,其他事务可以读取但是不能写入或更新.例子: 比如一张表三个字段 , id(商品id), n ...

  8. count() 方法

    count() :方法用于统计字符串里某个字符出现的次数.可选参数为在字符串搜索的开始与结束位置. num1,num2 = input('请输入字符串:'),input('请输入要查询的子串:') p ...

  9. Linux从入门到适应（一）：VSCode C++环境配置

    作为在Windows环境下习惯使用Visual Studio IDE的人,对于Linux环境下的Vim编辑使用十分难受,虽然网上很多人说vim非常牛逼和强大,但是我更加习惯于使用VS code的界面, ...

  10. 中南大学2019年ACM寒假集训前期训练题集(入门题)

    A: 漫无止境的八月 Description 又双叒叕开始漫无止境的八月了,阿虚突然问起长门在这些循环中团长哪几次扎起了马尾,他有多少次抓住了蝉等等问题,长门一共回复n个自然数,每个数均不超过1500 ...