您好,登錄后才能下訂單哦!
這篇文章主要講解了“CSS中子元素選擇器的使用介紹”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“CSS中子元素選擇器的使用介紹”吧!
與后代選擇器相比,子元素選擇器(Child selectors)只能選擇作為某元素子元素的元素。
選擇子元素
如果您不希望選擇任意的后代元素,而是希望縮小范圍,只選擇某個元素的子元素,請使用子元素選擇器(Child selector)。
例如,如果您希望選擇只作為 h2 元素子元素的 strong 元素,可以這樣寫:
代碼如下:
h2 > strong {color:red;}
這個規則會把第一個 h2 下面的兩個 strong 元素變為紅色,但是第二個 h2 中的 strong 不受影響:
代碼如下:
<h2>This is <strong>very</strong> <strong>very</strong> important.</h2>
<h2>This is <em>really <strong>very</strong></em> important.</h2>
語法解釋
您應該已經注意到了,子選擇器使用了大于號(子結合符)。
子結合符兩邊可以有空白符,這是可選的。因此,以下寫法都沒有問題:
代碼如下:
h2 > strong
h2> strong
h2 >strong
h2>strong
如果從右向左讀,選擇器 h2 > strong 可以解釋為“選擇作為 h2 元素子元素的所有 strong 元素”。
結合后代選擇器和子選擇器
請看下面這個選擇器:
代碼如下:
table.company td > p
上面的選擇器會選擇作為 td 元素子元素的所有 p 元素,這個 td 元素本身從 table 元素繼承,該 table 元素有一個包含 company 的 class 屬性。
感謝各位的閱讀,以上就是“CSS中子元素選擇器的使用介紹”的內容了,經過本文的學習后,相信大家對CSS中子元素選擇器的使用介紹這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。