在CSS中,我們可以使用嵌套類來設(shè)置樣式,嵌套類是指在已有的類內(nèi)部再定義一個類,這樣我們就可以在已有的樣式基礎(chǔ)上,為內(nèi)嵌的類添加或覆蓋樣式。
下面是一個示例,假設(shè)我們有一個名為.container
的類,它有一個子類是.content
:
.container { width: 100%; height: 100%; background-color: #f0f0f0; } .container .content { width: 50%; height: 50%; background-color: #ffffff; }
在這個示例中,.content
類繼承了.container
類的寬度和高度,但它的背景色是白色,覆蓋了.container
的背景色,這就是嵌套類的基本用法。
如果我們想要設(shè)置更多的樣式,比如字體顏色、邊框等,只需要在相應(yīng)的類中添加對應(yīng)的樣式規(guī)則即可。
.container { width: 100%; height: 100%; background-color: #f0f0f0; color: #333333; border: 1px solid #666666; } .container .content { width: 50%; height: 50%; background-color: #ffffff; color: #ff0000; border: 2px dashed #333333; }
在這個示例中,.content
類不僅覆蓋了.container
類的背景色,還覆蓋了字體顏色和邊框樣式,注意,如果有多重樣式的覆蓋,后定義的樣式會覆蓋先定義的樣式。