<!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>
Jquery选择器和css选择器的3中表示方法
最新推荐文章于 2023-06-11 13:34:45 发布