Rumah >hujung hadapan web >tutorial css >简单的CSS选择器-层级选择器
简单的CSS选择器-层级选择器
- 无忌哥哥asal
- 2018-06-29 15:22:054777semak imbas
简单的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>
Atas ialah kandungan terperinci 简单的CSS选择器-层级选择器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：简单的CSS选择器-常规选择器Artikel seterusnya：CSS在同级元素之间定位