前端 CSS的选择器 伪类选择器 CSS3 nth-child()
first-child 选中第一个标签 应用CSS样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css"> /* 选中第一个标签 */
.box ul li:first-child{
color: red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1
<a href="#">jack</a>
</li>
<li class="item2">
2
<a href="#">ben</a>
</li>
<li class="item3">
3
<a href="#">peter</a>
</li>
</ul>
</div>
</body>
</html>
last-child 选中最后一个标签 应用CSS样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css"> /* 选中最后一个标签 */
.box ul li:last-child{
color: red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1
<a href="#">jack</a>
</li>
<li class="item2">
2
<a href="#">ben</a>
</li>
<li class="item3">
3
<a href="#">peter</a>
</li>
</ul>
</div>
</body>
</html>
nth-child() 选中当前指定的标签，数值从1开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css"> /* 选中当前指定的标签，数值从1开始 */
.box ul li:nth-child(2){
color: red;
font-size:30px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1
<a href="#">jack</a>
</li>
<li class="item2">
2
<a href="#">ben</a>
</li>
<li class="item3">
3
<a href="#">peter</a>
</li>
</ul>
</div>
</body>
</html>
选中第二个标签
nth-child(n)
n表示选中所有 从0开始的 0的时候表示没有选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css"> /* n表示选中所有 从0开始的 0的时候表示没有选中 */
.box ul li:nth-child(n){
color: red;
font-size:30px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1
<a href="#">jack</a>
</li>
<li class="item2">
2
<a href="#">ben</a>
</li>
<li class="item3">
3
<a href="#">peter</a>
</li>
</ul>
</div>
</body>
</html>
nth-child(2n) 偶数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css"> /* 偶数 */
.box ul li:nth-child(2n){
color: red;
font-size:30px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1
<a href="#">jack</a>
</li>
<li class="item2">
2
<a href="#">ben</a>
</li>
<li class="item3">
3
<a href="#">peter</a>
</li> <li class="item4">
4
<a href="#">mike</a>
</li> <li class="item5">
5
<a href="#">tom</a>
</li>
</ul>
</div>
</body>
</html>
nth-child(2n-1) 奇数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css"> /* 奇数 */
.box ul li:nth-child(2n-1){
color: red;
font-size:30px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1
<a href="#">jack</a>
</li>
<li class="item2">
2
<a href="#">ben</a>
</li>
<li class="item3">
3
<a href="#">peter</a>
</li> <li class="item4">
4
<a href="#">mike</a>
</li> <li class="item5">
5
<a href="#">tom</a>
</li>
</ul>
</div>
</body>
</html>
隔几换色，隔行换色
隔3换色，就是4n+1，隔4换色，就是5n+1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css"> /* 奇数 */
.box ul li:nth-child(4n+1){
color: red;
font-size:30px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1
<a href="#">jack</a>
</li>
<li class="item2">
2
<a href="#">ben</a>
</li>
<li class="item3">
3
<a href="#">peter</a>
</li> <li class="item4">
4
<a href="#">mike</a>
</li> <li class="item5">
5
<a href="#">tom</a>
</li> <li class="item6">
6
<a href="#">ken</a>
</li> <li class="item7">
7
<a href="#">mary</a>
</li> <li class="item8">
8
<a href="#">tony</a>
</li> <li class="item9">
9
<a href="#">Howard</a>
</li>
</ul>
</div>
</body>
</html>
前端 CSS的选择器 伪类选择器 CSS3 nth-child()的更多相关文章
- CSS属性、伪类选择器，CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- 前端 CSS的选择器 伪类选择器
伪类选择器 常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中 没有访问的超链接a标签样式: a:link { color: blue; } <!DOCTYPE html> < ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- CSS选择器之伪类选择器（元素）
:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...
- 前端（六）—— 伪类选择器：a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
- CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法
一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> ...
- CSS选择器之伪类选择器（伪元素）
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
- CSS选择器之伪类选择器（交互）
:link 选取未访问链接 :active 选取活动链接(单击某链接,未松开鼠标时). :visited 选取已被访问的链接. :target 链接指定的目标 :hover 当鼠标浮在元素上方时. : ...
随机推荐
- thrift的php-v0.12版本类自动加载失败
参考网上教程,使用$loader->registerDefinition('Sample', $GEN_DIR); 但是会报PHP Fatal error: Uncaught Error: C ...
- c#中DataTable和DataSet区别
你可以把DataTable和DataSet看做是数据容器,比如你查询数据库后得到一些结果,可以放到这种容器里,那你可能要问:我不用这种容器,自己读到变量或数组里也一样可以存起来啊,为什么用容器? 原因 ...
- 03python面向对象编程4
http://c.biancheng.net/view/2287.html 1.1定义类和对象 在面向对象的程序设计过程中有两个重要概念:类(class)和对象(object,也被称为实例,insta ...
- 如何提高SMTP邮件的安全性？从而不被黑客窃听
简单邮件传输协议(SMTP)用于在邮件服务器之间进行邮件传输,并且传统上是不安全的,因此容易被黑客窃听.命名实体的基于DNS的认证(国家统计局)用于SMTP提供了邮件传输更安全的方法,并逐渐变得越来越 ...
- pyqt5-QAbstractScrollArea滚动条
继承 QObject-->QWidget-->QFrame-->QAbstractScrollArea 是抽象类 import sys from PyQt5.QtWidgets i ...
- 【NOIP2016提高A组8.12】通讯
题目 "这一切都是命运石之门的选择." 试图研制时间机器的机关SERN截获了中二科学家伦太郎发往过去的一条短信,并由此得知了伦太郎制作出了电话微波炉(仮). 为了掌握时间机器的技术 ...
- .Net 网站配置文件 webconfig 配置。 字体图标+视频播放 以及 文件上传
ASP.NET MVC 上传大文件时404 原来IIS7的上传文件大小,即便是在经典模式下,也一定要在system.webServer里设置,加上去就OK了 <system.webServer& ...
- linux运维、架构之路-SSH远程管理服务
一.SSH服务功能介绍 1.远程登录管理 提供类似telnet远程联机服务器的服务,即上面提到的SSH服务 2.远程传输文件 是类似FTP服务的sftp-server,借助SSH协议来传输数据的,提供 ...
- 认识js数组
1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数 ...
- 【bzoj2427】【软件安装】tarjan缩点+树形依赖背包
(上不了p站我要死了,侵权度娘背锅) Description 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上, ...