Home  >  Article  >  Web Front-end  >  Simple CSS selector-level selector

Simple CSS selector-level selector

无忌哥哥
无忌哥哥Original
2018-06-29 15:22:054733browse

Simple CSS selector-level selector

* There are 4 css level selectors

* 1. Descendant selector: $('div p'), in the ancestor element Query the specified element among all descendants (descendants) of the parent element

* 2. Child element selector: $('div > p'), search among all child elements of the parent element

* 3. Adjacent selector: $('.top li'), selects the direct sibling adjacent elements of the current element

* 4. Sibling selector: $('.top ~ li') , select all sibling elements behind the current element

<!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>

The above is the detailed content of Simple CSS selector-level selector. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn