CSS 中的子元素是指在 HTML 中,一個元素中嵌套了另一個元素,那么嵌套在里面的元素就是主元素的子元素。在樣式表中設置子元素的樣式可以使用父元素選擇器,然后通過空格和子元素的標簽名來指定。
.parent p { /* 這里設置父元素中所有子元素的樣式 */ }
上述代碼中,.parent 是父元素的 class 名稱,p 是子元素的標簽名,兩者之間通過空格分隔。
在 CSS 中還可以針對子元素的屬性來設置樣式。比如我們想要只設置父元素中 class 為 child 的子元素的樣式,那么可以這樣寫:
.parent .child { /* 這里只針對父元素中 class 為 child 的子元素設置樣式 */ }
上述代碼中,.parent 表示父元素,.child 表示子元素中的 class,兩者之間用空格分隔。這種方式可以更加精細地控制需要設置樣式的子元素。
除了用元素標簽名和 class 來設置子元素樣式,還可以使用子元素在 HTML 結構中的位置。比如我們想要設置父元素中第一個子元素的樣式,可以這樣寫:
.parent >:first-child { /* 這里只針對父元素中第一個子元素設置樣式 */ }
上述代碼中,>表示直接選擇,:first-child 表示選擇第一個子元素。這種方式可以在 HTML 結構比較復雜的情況下更加靈活地選擇需要設置樣式的子元素。