010_CSS后代选择器
1. 后代選擇器(descendant selector)又稱為包含選擇器。
2. 后代選擇器可以選擇作為某元素后代的元素。
3. 根據上下文選擇元素
3.1. 通過依據元素在其位置的上下文關系來定義樣式, 你可以使標記更加簡潔。
3.2. 在CSS1中, 通過這種方式來應用規則的選擇器被稱為上下文選擇器(contextual selectors), 這是由于它們依賴于上下文關系來應用或者避免某項規則。在CSS2中, 它們稱為派生選擇器(我們使用更好的叫法, 后代選擇器)。
3.3. 比方說, 你希望列表中的strong元素變為斜體字, 而不是通常的粗體字, 可以這樣定義一個派生選擇器:
li strong {font-style: italic;font-weight: normal;}3.4. 請注意標記為<strong>的藍色代碼的上下文關系:
| <p><strong>我是粗體字,?不是斜體字,?因為我不在列表當中,?所以這個規則對我不起作用</strong></p> <ol> ????<li><strong>我是斜體字。這是因為 strong 元素位于 li 元素內。</strong></li> ????<li>我是正常的字體。</li> </ol> |
3.5. 語法解釋: li strong選擇器可以解釋為"作為li元素后代的任何strong元素"。
4. 兩個元素之間的層次間隔
4.1. 有關后代選擇器有一個易被忽視的方面, 即兩個元素之間的層次間隔可以是無限的。
4.2. 例如, 如果寫作ul em, 這個語法就會選擇從ul元素繼承的所有em元素, 而不論em的嵌套層次多深。
4.3. 例子
4.3.1. 代碼
<!DOCTYPE html> <html><head><title>CSS后代選擇器</title><meta charset="utf-8" /><style type="text/css">ul em {color: red;font-weight: bold;}</style></head><body><ul><li>List item 1<ol><li>List item 1-1</li><li>List item 1-2</li><li>List item 1-3<ol><li>List item 1-3-1</li><li>List item <em>1-3-2</em></li><li>List item 1-3-3</li></ol></li><li>List item 1-4</li></ol></li><li>List item 2</li><li>List item 3</li></ul></body> </html>4.3.2. 效果圖
?
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的010_CSS后代选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 009_CSS分组选择器
- 下一篇： 011_CSS子元素选择器