层次选择器

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

</style>

<script src="js/jq/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$(document).ready(function(){

$(document).click(function(){

// #div2 p :div2下的所有p子元素,包括孙子

// $("#div2 p").hide();

// #div2>p :直接子元素,只有儿子那一级

// $("#div2>p").hide();

// #div2+p : 紧邻的兄弟节点,只有一个

// $("#div2+p").css("color","gold");

// #div2~p :所有的兄弟节点

//jq要想改变css样式,用css()方法

// $("#div2~p").css("color","deeppink");

$("p:last").css("color","mediumspringgreen");

$("p:first").css("color","yellow");

$("div:not(#div1)").css("background-color","#00BFFF");

$("#div1 p:even").css("font-size","30px"); // even选择的下标是从0开始的,0认为是偶数

$("#div2 p:odd").css("text-shadow","3px 3px pink"); // even选择的下标是从0开始的,odd选择奇数

})

})

</script>

</head>

<body>

<div id="div1">

<p>p1</p>

<p>p2</p>

<p>p3</p>

</div>

<div id="div2">

<p>2下的p1</p>

<div id="div3">

<p>被嵌套的p2</p>

</div>

<p>2下p3</p>

</div>

<p>兄弟p1</p>

<p>兄弟p2</p>

</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值