简单的CSS选择器-层级选择器
程序员文章站
2022-04-08 11:16:40
...
简单的CSS选择器-层级选择器
* css层级选择器有4个
* 1.后代选择器: $('div p'),在祖先元素的所有后代(子孙)中,查询指定元素
* 2.子元素选择器: $('div > p'),在父元素的所有子元素中进行查找
* 3.相邻选择器: $('.top + li'),选择当前元素的直接同级相邻元素
* 4.兄弟选择器: $('.top ~ li'),选择当前元素后面所有同级兄弟元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1简单的CSS选择器-层级选择器</title>
</head>
<body>
<div>
<span>div子元素span</span>
<p id="part">PHP中文网<span>div的子元素p中的span</span></p>
<ul>
<li>列表项01</li>
<li>列表项02</li>
<li><a href="">列表项03</a></li>
<li><a href="">列表项04</a></li>
<li>列表项05</li>
<li>列表项06</li>
<li id="just">列表项07(id="just")</li>
<li>列表项08 <span>div子元素ul的子元素li中的span</span></li>
<li>列表项09 <span>div子元素ul的子元素li中的span</span></li>
<li>列表项10</li>
<p>我是列表中的p标签</p>
</ul>
<p>不知不觉又大了一岁</p>
</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
//1.后代选择器
$('div span').css('background-color','wheat')
//2.子元素选择器
//将div下面所有的子元素,前景色设置为蓝色
//<a>非子元素所以文本不变色,<span>文本变色是因为继承了父元素样式
$('div > *').css('color','blue')
//仅将<div>中的子元素<p>的前景色设置红色
$('div > p').css('color','red')
//3.相邻选择器
//匹配class="current"元素的直接下一个元素,可以有多个
$('.current + li').css('color', 'cyan')
//选择id=part元素直接相邻元素ul
$('#part + ul ').css('border', '1px dotted red')
//因为直接相邻同级元素只有一个,只能是<ul>,所以可以省略
$('#part + ').css('border', '1px dotted green')
//4.兄弟选择器
//匹配id="just"元素后面的所有兄弟元素
$('#just ~ *').css('color', 'red')
</script>
以上就是简单的CSS选择器-层级选择器的详细内容，更多请关注其它相关文章！