CSS中,有時(shí)候我們需要選中父級(jí)元素,這時(shí)候就需要用到CSS中的“父選擇器”了。
.parent { background: #f2f2f2; padding: 10px; } .parent p { font-size: 16px; } .parent:hover p { color: #ff0000; }
如上代碼,我們可以通過(guò)“父選擇器”來(lái)為子元素添加一些樣式,比如在.parent:hover狀態(tài)下將字體顏色改為紅色。
具體的選擇器語(yǔ)法為:父元素選擇器 空格 子元素選擇器,比如上述代碼中的.parent:hover p。
另外,如果我們要選中父元素本身,而非其內(nèi)部的子元素,可以使用“偽類”選擇器::has(),如下代碼:
.parent:has(.child) { border: 1px solid #ccc; }
以上代碼表示,如果.parent元素中包含.class元素,就將.parent元素添加1px的邊框。
通過(guò)“父選擇器”和“偽類”選擇器,我們可以更靈活地控制元素樣式,實(shí)現(xiàn)更多的效果。