ホームページ > 記事 > ウェブフロントエンド > シンプルな CSS セレクターレベルのセレクター
シンプルな CSS セレクターレベルのセレクター
- 无忌哥哥オリジナル
- 2018-06-29 15:22:054742ブラウズ
シンプルな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 セレクターレベルのセレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。