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