批改状态：未批改
老师批语：
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
重点：
1、全部兄弟选择器
$（‘li：nth-child(5)~li’）.addclass('green')
/选中第五个到最后的li标签/
2、直接选中第一个或最后一个选择器
$（‘li:first-child’）.addclass('green')
/直接选中第一个选择器/
$（‘li:last-child’）.addclass('green')
/直接选中最后一个选择器/
3、first选择器
$（‘li:first’）.addclass('green')
/选中第一个选择器/
4、直接命中元素
方法一、
$（‘li:nth-child(7)’）.addclass('green')
/直接选中第七个选择器/
方法二、
$（‘li:eq(7)’）.addclass('green')
/直接选中第八个选择器/
5、清楚所有元素或类
$（‘li:eq(7)’）.removeAttr('style')
$（‘li:eq(7)’）.removeClasss()/空值是所有、如写入类名则取消该类名/
6、大于或小于的清楚样式
$('li':gt(2)'）.addclass('green')/选中大于2/
$('li':lt(8)').addclass('green')/选中小于8/
7、选中奇数或偶数
$("li:even").addClass('red')/选中奇数，实际上是偶数/
$("li:odd").addClass('green')/选中偶数，实际上是奇数/
以下为代码部分：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
li{
list-style: none;
margin: 20px;
}
ul{
text-align: center;
margin-top: 200px;
}
a{
margin-left: 20px;
}
.cls{
background: brown;
}
.red{
color: red;
}
.green{
color: green;
}
</style>
</head>
<body>
<ul>
<li>测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>测试li文本变化<a href="">测试文本颜色变化</a></li>
</ul>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('li:first').addClass('cls')
//first选择器，选中了li的第一个元素，并且增加了一个类为cls
$('li:first').css('background','#A52A2A')
//直接选中第一个或最后一个选择器
$('li:last-child').css('background','#A52A2A')
//直接选择最后一个选择器
$('li:nth-child(3)').css('color','red')
//命中选择第三个选择器
$('li:eq(7)').addClass('cls')
//命中选择第八个选择器
$('li').removeAttr('style')
//清除li中的所有属性
$('li').removeClass()
//清楚所有的类
$('li:gt(4)').addClass('red')
// 大于5的选择器选中
$('a:lt(5)').addClass('green')
// 小于6的选择器选中
$('li').removeAttr('style')
// 清除li所有标签元素
$('li').removeClass()
// 清除li所有的类
$('a').removeClass()
// 清除a所有的类
$('li:even').addClass('red')
// 选中所有的偶数,实际为奇数
$('li:odd').addClass('green')
// 选中所有的奇数,实际为偶数
</script>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
