* 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">topic.alibabacloud.com<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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
