Jquery选择器和css选择器的3中表示方法

最新推荐文章于 2023-06-11 13:34:45 发布

Uno2

最新推荐文章于 2023-06-11 13:34:45 发布

阅读量537

点赞数

分类专栏： CSS学习 Jquery学习

本文链接：https://blog.csdn.net/Raynaing/article/details/53675701

版权

Jquery学习同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

CSS学习

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.1.js" ></script>
		<style type="text/css">
			/*如果同时设置多个属性,需要用,隔开
			 表示设置class=ul和class=li的元素的样式
			 <ul class="ul">
			 <li class="li">2</li>*/
			.ul,.li{
				color: navajowhite;
				cursor: pointer;
			}
			/*如果想要设置选择元素后代的样式,需要用空格隔开，
			 * 表示设置id=div1标签下的class=ul下的class=li的元素样式
			 * <div id="div1"><ul class="ul"><li class="li">1</li>*/
			#div1 .ul .li{
				color: red;
				cursor: pointer;
			}
			/*如果设置所选元素具有多个css属性的,中间不要隔开
			 表示设置class=ul li的元素的样式
			<li class="ul li">1</li>*/
			.ul.li{
				color: green;
			}
			#div2 span{
				color: blue;
				cursor: pointer;
			}
		</style>
		<script type="application/javascript">
			$(function(){
				//表示 选择id=div1标签下的class=ul下的class=li的元素
				//选择元素后代的样式,需要用空格隔开
				//<div id="div1"><ul class="ul"><li class="li">1</li>
				$("#div1 .ul .li").css("border", "1px solid #0000FF");
				 //表示选择class=ul li的元素的
				 //所选元素具有多个css属性的,中间不要隔开
				 //<li class="ul li">1</li>
				$(".ul.li").css("border", "1px solid #000000");
				// 表示选择class=ul和class=li的元素
				//同时设置多个属性,需要用,隔开
				//<ul class="ul"><li class="li">2</li>
				$(".ul,.li").css("border", "1px solid #FF0000");
				//表示选择所有div的元素
				$("div").css("border", "1px solid green");
			})
		</script>
	</head>
	<body>
		<div id="div1"><ul class="ul"><li class="li">1</li>
				<li class="li">2</li>
				<li>3</li>
			</ul>
		</div>
		<div id="div2">
			<span class="span">span</span>
		</div>
		<ul class="ul">
				<li class="li">class="li"</li>
				<li class="li">class="li"</li>
				<li class="ul li">class="ul li"</li>
			</ul>
	</body>
</html>

Uno2

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery选择器和css选择器的3中表示方法

/*如果同时设置多个属性,需要用,隔开表示设置class=ul和class=li的元素的样式 2*/ .ul,.li{ color: navajowhite; cursor: pointer; } /*如果想要设置选择元素后代的样式,需要用空格隔开， * 表示设置id=div1标签下的class=ul下的class=li的元素样
复制链接

扫一扫