选择器的使用(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>

效果如下:

时间: 2024-10-24 05:52:55

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

关于选择器优先级的误解[刷新三观,深入理解选择器优先级]

优先级并不是网上说的ABCD四个级别,1000.100.10.1这样,而是根据选择器数目和选择器种类来计算的. 选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范中是这样描述的:1.如果声明来自于“style”属性,而不是带有选择器的规则,则记为 1,否则记为 0 (= a)(HTML元素的style属性也是样式规则,因为这些样式规则没有选择器,因此记为a=1,b=0,c=0,d=0)2.计算选择器中 ID 属性的个数 (= b)3.计算选择器中其他属性(类.属性选择器)和伪类的个数 (

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

× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选择器和条件属性选择器三种.本文将详细该部分内容 简单属性选择器 [attribute] [attribute]选择器选择拥有该属性的元素,返回集合元素 //选择拥有title属性的所有元素 $('[title]') //选择拥有title属性的所有span元素 $('span[title]') //

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

问题:在android开发过程中,有时会在不同情况下遇到同种问题:The specified child already has a parent.You must call removeView() on the child's parent first.日志中例如以下图所看到的: 分析:意思是这个特定的child已经有一个parent了,假设你要继续使用它,就必须先调用removeView()方法移除它原来的的parent,才干继续你的内容. 举例:在主activity中点击按键弹出自己定义

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

× 目录 [1]contains [2]empty [3]parent[4]has[5]not 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过滤规则主要体现在它所包含的子元素或文本内容上 :contains(text) :contains(text)选择器选择含有文本内容为'text'的元素,返回集合元素 //返回所有文本内容包含'test'的元素 $(':contains("test")') //返回所有文本内容包含'test'的span元素 $('span:contai

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

× 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态 前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当前获得焦点的元素 <div> <button>btn1</button> <button>btn2</button> <button>btn3</button> </div> <script> docu

深入学习 jQuery 选择器系列第三篇——过滤选择器之索引选择器 - 小火柴的蓝色理想 - 博客园

博客地址:   http://www.cnblogs.com/xiaohuochai/p/5807292.html#3559878 写的很细致的博文, 手动收藏+转发.

css选择器(上)--基本,组合,属性选择器

原文地址:https://www.cnblogs.com/whluan/p/12173112.html

css3 nth 选择器

css3: nth选择器 我们把CSS3的:nth选择器也称为CSS3 结构类 选择方法: :first-child(),:last-child ()  :nth-child(n)     :nth-last-child()  :nth-of-type()  :nth-last-of-type ()   :first-of-type()  :last-of-type()  :only-child() :only-of-type() :empty() 首先我们可以理解,如果我们指定了上面的规则,

jQuery选择器代码详解(四)——Expr.preFilter

原创文章,转载请注明出处,多谢! Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(rune

jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——词法解析

jQuery源码9600多行,而Sizzle引擎就独占近2000行,占了1/5.Sizzle引擎.jQuery事件机制.ajax是整个jQuery的核心,也是jQuery技术精华的体现.里面的有些策略确实很值得学习,先膜拜之,然后细细学习. 在学习Sizzle引擎之前我们先准备一点知识,和先了解Sizzle引擎的一点工作原理. <div id="chua"> <a> <span>chua的测试用例</span> </a> &l