标签：11 同学 16 元素 li 2021 选择器 css red
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
JQuery选择器
一.基础选择器
id选择器
<!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.0">
<title>Document</title>
<script src="./jquery-1.12.4.js"></script>
</head>
<body>
<div id="box">id选择器</div>
<script>
/* id选择器 */
$('#box').css('font-size','40px');
$('#box').css({color:'red',background:'green',padding:'10px'})
</script>
</body>
</html>
类选择器
<!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.0">
<title>Document</title>
<script src="./jquery-1.12.4.js"></script>
</head>
<body>
<h1 class="a">类选择器</h1>
<script>
/* 类选择器 */
$('.a').css('font-size','40px');
$('.a').css({color:'red',background:'green',padding:'10px'})
</script>
</body>
</html>
标签选择器
<!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.0">
<title>Document</title>
<script src="./jquery-1.12.4.js"></script>
</head>
<body>
<h1 class="a">标签选择器</h1>
<script>
/* 类选择器 */
$('h1').css('color','red');
</script>
</body>
</html>
并集选择器
<!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.0">
<title>Document</title>
<script src="./jquery-1.12.4.js"></script>
</head>
<body>
<div id="box">id选择器</div>
<h1 class="a">并集选择器</h1>
<h1 class="a">标签选择器</h1>
<script>
/* 类选择器 */
$('#box,.a,h1').css('color','green');
</script>
</body>
</html>
全局选择器
$('*').css('background','red');
二. 层级选择器
后代选择器
<!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.0">
<title>Document</title>
<script src="./jquery-1.12.4.js"></script>
</head>
<body>
<ul>
<li>我是同学1
<ol>
<li>我是同学1的儿子1</li>
<li>我是同学1的儿子2</li>
<li>我是同学1的儿子3</li>
</ol>
</li>
<li class="a">我是同学2</li>
<li class="b" style="display: none;">我是同学3</li>
<li>我是同学4</li>
<li>我是同学5</li>
</ul>
<script>
/* 后代选择器 */
/* 选取ul元素里的所有li（后代）元素 */
$('ul li').css({background:'skyblue',color:'#fff'})
</script>
</body>
</html>
子选择器
<!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.0">
<title>Document</title>
<script src="./jquery-1.12.4.js"></script>
</head>
<body>
<ul>
<li>我是同学1
<ol>
<li>我是同学1的儿子1</li>
<li>我是同学1的儿子2</li>
<li>我是同学1的儿子3</li>
</ol>
</li>
<li class="a">我是同学2</li>
<li class="b" style="display: none;">我是同学3</li>
<li>我是同学4</li>
<li>我是同学5</li>
</ul>
<script>
/* 选取parent元素下的child（子）元素 */
$('ul>li').css({border:'1px solid red',padding:'10px'})
</script>
</body>
</html>
相邻元素选择器
<!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.0">
<title>Document</title>
<script src="./jquery-1.12.4.js"></script>
</head>
<body>
<ul>
<li>我是同学1
<ol>
<li>我是同学1的儿子1</li>
<li>我是同学1的儿子2</li>
<li>我是同学1的儿子3</li>
</ol>
</li>
<li class="a">我是同学2</li>
<li class="b">我是同学3</li>
<li>我是同学4</li>
<li>我是同学5</li>
</ul>
<script>
/* 相邻元素选择器 */
/* 选取紧邻prev元素之后的next元素(不是一群 是一个) */
$('.a+li').css('background','red');
</script>
</body>
</html>
同辈元素选择器
<!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.0">
<title>Document</title>
<script src="./jquery-1.12.4.js"></script>
</head>
<body>
<ul>
<li>我是同学1
<ol>
<li>我是同学1的儿子1</li>
<li>我是同学1的儿子2</li>
<li>我是同学1的儿子3</li>
</ol>
</li>
<li class="a">我是同学2</li>
<li class="b">我是同学3</li>
<li>我是同学4</li>
<li>我是同学5</li>
</ul>
<script>
/* 同辈元素选择器 */
/* 选取prev元素之后的所有siblings元素(不是一个 是一群) */
$('.a~li').css('background','red');
</script>
</body>
</html>
三.过滤选择器
<style>
.redClass{
color:red;
}
</style>
<body>
<ul>
<li>我是新入职的高级程序员0
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
</li>
<li>我是新入职的高级程序员1</li>
<li class="a">我是新入职的高级程序员2</li>
<li>我是新入职的高级程序员3</li>
<li>我是新入职的高级程序员4</li>
</ul>
</body>
<script>
/* 选取第一个元素 */
$('ul li:first').addClass('bg');
/* 选取最后一个元素 */
$('ul li:last').addClass('bg');
/* 选取去除所有与给定选择器匹配的元素 */
$('ul li:not(.a)').addClass('bg');
/* 选取索引是偶数的所有元素（index从0开始） */
$('ul li:even').addClass('bg');
/* 选取索引是奇数的所有元素（index从0开始） */
$('ul li:odd').addClass('bg');
/* 选取索引等于index的元素（index从0开始） */
$('ul li:eq(1)').addClass('bg');
/* 选取索引大于index的元素（index从0开始）(不包括当前的索引的) */
$('ul li:gt(1)').addClass('bg');
/* 选取索引小于index的元素（index从0开始）(不包括当前的索引的) */
$('ul li:lt(3)').addClass('bg');
/* 选取所有标题元素，如h1~h6 */
$('ul li :header').addClass('bg')
</script>
四.属性选择器
<style>
.redClass{
color:red;
}
</style>
<body>
<ul>
<li class="a">我是程序员1</li>
<li data-name="zhangsan">我是程序员2</li>
<li class="b">我是程序员3</li>
<li class="c">我是程序员4</li>
<li data-name="lisi">我是程序员5</li>
</ul>
<a href="http://www.baidu.cn">百度</a>
<a href="www.baidu.com">百度一下</a>
</body>
<script>
/* 属性选择器可以根据是否包含某属性来选取元素 */
$('ul li[data-name]').css('background','red');
/* 根据属性的值来选取元素 */
$('ul li[data-name=lisi]').css('background','red');
/* 不等于属性是某个特定值的元素 */
$('ul li[data-name!=lisi]').css('background','red');
/* 以指定值开头的元素 */
$('a[href^=http]').css('color','red');
$('a[href^="http"]').css('color','red');
/* 以指定值结尾的元素 */
$('a[href$=".com"]').css('color','red');
/* 包含指定值的元素 */
/* *通配符 */
$('a[href*="baidu"]').css('color','red');
/* 添加样式类的 */
$('a[href*="baidu"]').addClass('redClass')
</script>
标签：11,同学,16,元素,li,2021,选择器,css,red 来源： https://blog.csdn.net/a_shun66/article/details/121358500
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。