CSS 高階選擇器
CSS 高階選擇器包括相鄰選擇器、屬性選擇器、直接子選擇器、第 n 個子型別選擇器等,還包括普通同級選擇器,示例如下
h1 ~ h3
直接子選擇器示例 -
div > span
以下程式碼顯示了 CSS 中的高階選擇器 -
示例
<html> <head> <style> #red { color: red; } .green { background: green; } ul:nth-of-type(1) { background: rgb(0, 174, 255); } ul + h3 { border: 4px solid rgb(19, 0, 128); } a[href="https://www.wikipedia.org"] { font-size: 25px; } h1 ~ h3 { font-size: 40px; } div > span { background-color: DodgerBlue; } </style> </head> <body> <h1>Advanced Selectors Example</h1> <ul> <li>Cow</li> <li>Dog</li> <li>Cat</li> </ul> <ul> <li>Puma</li> <li>Leopard</li> <li>Cheetah</li> </ul> <h3>Animals</h3> <div> <span>Text sample</span> <p> Paragraph Text <span>span text</span> </p> <p class="green">Paragraph Text</p> <p id="red">Paragraph Text.</p> <p class="green">Paragraph Text</p> </div> <a href="https://www.google.com">www.google.com</a> <a href="https://www.wikipedia.org" target="_blank">www.wikipedia.org</a> </body> </html>
輸出
以上程式碼將產生以下輸出 -
廣告