011_CSS子元素选择器
生活随笔
收集整理的這篇文章主要介紹了
011_CSS子元素选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 與后代選擇器相比, 子元素選擇器(Child selectors)只能選擇作為某元素的子元素。
2. 選擇子元素
2.1. 如果您不希望選擇任意的后代元素, 而是希望縮小范圍, 只選擇某個元素的子元素, 請使用子元素選擇器(Child selector)。
2.2. 例如, 如果您希望選擇只作為h1元素子元素的strong元素, 可以這樣寫:
h1 > strong {color: red; }這個規則會把第一個h1下面的兩個strong元素變為紅色, 但是第二個h1中的strong不受影響:
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>2.3. 例子
2.3.1.?代碼
<!DOCTYPE html> <html><head><title>CSS子元素選擇器</title><meta charset="utf-8" /><style type="text/css">h1 > strong {color: red;}</style></head><body><h1>This is <strong>very</strong> <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1></body> </html>2.3.2.?效果圖
3. 語法解釋
3.1. 您應該已經注意到了, 子選擇器使用了大于號(子結合符)。
3.2. 選擇器h1 > strong可以解釋為"選擇作為h1元素子元素的所有strong元素"。
總結
以上是生活随笔為你收集整理的011_CSS子元素选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 010_CSS后代选择器
- 下一篇： 012_CSS相邻兄弟选择器