建站
咨詢
售后
建站咨詢
新聞中心
很早之前，就寫(xiě)過(guò)一篇與原生嵌套相關(guān)的文章 -- CSS 即將支持嵌套，SASS/LESS 等預(yù)處理器已無(wú)用武之地？，彼時(shí) CSS 原生嵌套還處于工作草案 Working Draft (WD) 階段，而今天（2023-09-02），CSS 原生嵌套 Nesting 終于成為了既定的規(guī)范！
我們提供的服務(wù)有：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、長(zhǎng)海ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的長(zhǎng)海網(wǎng)站制作公司
CSS 原生嵌套語(yǔ)法
在之前，只有在 LESS、SASS 等預(yù)處理器中，我們才能使用嵌套的寫(xiě)法，像是這樣：
div {
& > p {
color: red;
}
&:hover {
color: yellow;
}
}從 Chrome 112 開(kāi)始，原生 CSS 也可以使用嵌套語(yǔ)法了。
其語(yǔ)法規(guī)則大致如下：
parentRule {
/* parent rule style properties */
& childRule {
/* child rule style properties */
}
}CSS 原生嵌套語(yǔ)法能力邊界
大部分同學(xué)對(duì)嵌套應(yīng)該還是非常熟悉的，下面我們一起看看，CSS 原生嵌套的能力邊界，語(yǔ)法支持范圍。
支持嵌套，并且支持多層嵌套
這個(gè)很好理解，直接看 DEMO：
CSS
Nesting
div {
border: 1px solid #000;
.g-h3 {
color: red;
.g-span {
color: blue;
}
}
}效果如下：
當(dāng)然，這里有個(gè)值得注意的點(diǎn)。如果我們不使用具體的 ClassName，而是使用標(biāo)簽名稱選擇器，像是這樣：
div {
border: 1px solid #000;
h3 {
color: red;
span {
color: blue;
}
}
}嵌套規(guī)則是不會(huì)生效的，此時(shí)，我們需要在標(biāo)簽名稱選擇器前，加上 & 符合：
div {
border: 1px solid #000;
& h3 {
color: red;
& span {
color: blue;
}
}
}與 SASS 等類(lèi)似，& 符號(hào)在嵌套中，也表示嵌套的父選擇器本身，因此，上面兩個(gè)嵌套選擇器最終的表達(dá)式實(shí)則為：
- div h3 { color: red }。
- div h3 span { color blue }。
在嵌套中使用偽元素和偽類(lèi)
直接上代碼，這個(gè)也是傳統(tǒng) CSS 預(yù)處理器支持的內(nèi)容：
div {
/* ... */
&:hover {
color: red;
}
&:is(.content, footer) {
padding: 16px;
}
&::before {
content: "";
/* ... */
}
}上述代碼中，我們能夠在嵌套中使用偽類(lèi)、偽元素。
在嵌套中使用媒體查詢
這個(gè)就比較有意思了，我們甚至可以在嵌套中，使用媒體查詢語(yǔ)法。
CSS Nesting without @media
CSS Nesting with @media
.media {
@media (min-width: 600px) {
& h3 {
color: red;
}
}
}此時(shí)，下方帶有 .media class 的容器，在視口寬度大于 600px 的時(shí)候，設(shè)置 color: red。
效果如下：
完整的 DEMO，你可以戳這里試一下：CodePen Demo -- CSS Nesting Demo
在嵌套中嵌套自身
哈？什么是在嵌套中嵌套自身？
其實(shí)也很好理解，也就是 & 符號(hào)的時(shí)候，上面提到了，& 符號(hào)在嵌套中，也表示嵌套的父選擇器本身，因此，我們還可以有這樣的寫(xiě)法：
div {
& h2 & {
/* 表示 div h2 div {} */
}
}這種寫(xiě)法也是允許的，我們只需要將 & 替換成 div 即可，此時(shí)表示 div h2 div {}。
總結(jié)一下
總結(jié)而言，CSS 原生的嵌套功能相當(dāng)強(qiáng)大，基本是傳統(tǒng)預(yù)處理器的平替。使用嵌套規(guī)則的好處在于：
- 更加易讀和易維護(hù)，嵌套幫助我們編寫(xiě)更易于維護(hù)的 CSS，基于嵌套，我們可以更好的控制樣式的作用域
- 更少的代碼，嵌套幫助我們編寫(xiě)更少的代碼，因?yàn)槲覀儾恍枰槐橛忠槐榈刂貜?fù)父選擇器
隨著兼容性的鋪開(kāi)，慢慢地，我們可以嘗試真正運(yùn)用它們到實(shí)際代碼中。
網(wǎng)頁(yè)名稱：現(xiàn)代CSS解決方案：原生嵌套（Nesting）
網(wǎng)頁(yè)鏈接：http://m.5511xx.com/article/dppccdh.html
