选择器的使用(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>
效果如下:
选择器的使用(nth-child和nth-last-child选择器)的更多相关文章
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器
× 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...
- 请写出css中选择器(元素选择器、类选择器、id选择器)的优先级顺序,和当各种选择器组合时,优先级的计算规则是什么?
id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...
- 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器
× 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态 前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当 ...
- 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器
× 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- 安卓自己定义对话框及The specified child already has a child问题
问题:在android开发过程中,有时会在不同情况下遇到同种问题:The specified child already has a parent.You must call removeView() ...
- CSS样式表及选择器相关内容(二)-伪类与伪元素选择器
伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中) 1.a标签伪类选择器,其他标签类似 eg: ...
- [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 ...
- Sass函数:列表函数nth
语法: nth($list,$n) nth() 函数用来指定列表中某个位置的值.不过在 Sass 中,nth() 函数和其他语言不同,1 是指列表中的第一个标签值,2 是指列给中的第二个标签值,依此类 ...
随机推荐
- 学习笔记 第六章 使用CSS美化图片
第六章 使用CSS美化图片 6.1 在网页中插入图片 GIF图像 跨平台能力,无兼容性问题: 具有减少颜色显示数目而极度压缩文件的能力,不会降低图像的品质(无损压缩): 支持背景透明功能,便于图像 ...
- CAS介绍
1.概述 单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. 耶 ...
- linux centos 下php的mcrypt扩展
去http://www.sourceforge.net下载Libmcrypt,mhash,mcrypt安装包 libmcrypt(libmcrypt-2.5.8.tar.gz ):mcrypt(mcr ...
- (转) 淘淘商城系列——解决KindEditor上传图片浏览器兼容性问题
http://blog.csdn.net/yerenyuan_pku/article/details/72808229 上文我们已实现了图片上传功能,但是有个问题,那就是对浏览器兼容性不够,因为Map ...
- Python_练习_VS清理器
#导入os import os #创建列表放入后缀 d=[ '.txt','obj','tlog','lastbuildstate','idb','pdb','pch','res','ilk','sd ...
- redis 其他特性
1.消息订阅与发布 subscribe my1 订阅频道 psubscribe my1* 批量订阅频道,订阅以my1开头的所有频道 publish my1 hello 在指定频道中发布消息,返回值为接 ...
- linux 配置Java、Mysql、Tomcat、Redis开发环境
1.安装四个依赖 以下四个依赖必须按顺序联网安装:yum install glibc.i686yum -y install libaio.so.1 libgcc_s.so.1 libstdc++.so ...
- make、makefile
http://blog.csdn.net/wed110/article/details/34853475 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows ...
- Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 点开错误的文 ...
- 从Excel读取数据,然后分析相似的数据,多线程处理(多线程比较相似的字符串,统计出相似的数量及字符串)
之前的jar包有问题,现已修改. 需要的jar包,已修改 自己去Maven中央仓库下载jar包. excel数据: 直接上代码. 程序再度优化了一遍.之后如果想再度精准,可能需要建模,最近没空继续做了 ...