前端 CSS的选择器 伪类选择器 CSS3 nth-child()
2024-08-28 05:54:56
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>
最新文章
- js 和 jq 控制 checkbox
- 攻城狮在路上（贰） Spring（二）--- Spring IoC概念介绍
- oracle查看表占磁盘大小
- 第三百三十天 how can I 坚持
- 服务器返回的JSON字符串
- JS遍历对象或者数组
- 【POJ】3468 A Simple Problem with Integers ——线段树 成段更新 懒惰标记
- 用JavaScript实现网页动态水印
- Servlet_ResponseHeader
- 《java.util.concurrent 包源码阅读》20 DelayQueue
- BinderPool — Andorid端的“服务发现治理工具”
- 使用基本MVC2模式创建新闻网站
- 【转载】Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
- Python开发——【条件】语句
- SQL SERVER GO命令循环使用实例
- ubuntu部署git
- 公共的service接口
- 清空数据库错误:因为该表正由 FOREIGN KEY 约束引用 解决办法
- canvas技术整理
- BZOJ3262陌上花开（三维偏序问题（CDQ分治+树状数组））+CDQ分治基本思想