집 > 기사 > 웹 프론트엔드 > 간단한 CSS 선택기 수준 선택기

간단한 CSS 선택기 수준 선택기

无忌哥哥원래의: 2018-06-29 15:22:054698검색

간단한 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.后代选择器
$(&#39;div span&#39;).css(&#39;background-color&#39;,&#39;wheat&#39;)
//2.子元素选择器
//将div下面所有的子元素,前景色设置为蓝色
//<a>非子元素所以文本不变色,<span>文本变色是因为继承了父元素样式
$(&#39;div > *&#39;).css(&#39;color&#39;,&#39;blue&#39;)
//仅将<div>中的子元素<p>的前景色设置红色
$(&#39;div > p&#39;).css(&#39;color&#39;,&#39;red&#39;)
//3.相邻选择器  
//匹配class="current"元素的直接下一个元素,可以有多个
$(&#39;.current + li&#39;).css(&#39;color&#39;, &#39;cyan&#39;)
//选择id=part元素直接相邻元素ul
$(&#39;#part + ul &#39;).css(&#39;border&#39;, &#39;1px dotted red&#39;)
//因为直接相邻同级元素只有一个,只能是<ul>,所以可以省略
$(&#39;#part + &#39;).css(&#39;border&#39;, &#39;1px dotted green&#39;)
//4.兄弟选择器
//匹配id="just"元素后面的所有兄弟元素
$(&#39;#just ~ *&#39;).css(&#39;color&#39;, &#39;red&#39;)
</script>

위 내용은 간단한 CSS 선택기 수준 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：단순 CSS 선택기 - 일반 선택기다음 기사：단순 CSS 선택기 - 일반 선택기