Sass 中還提供了選擇器嵌套功能,但這也并不意味著你在 Sass 中的嵌套是無節(jié)制的,因為你嵌套的層級越深,編譯出來的 CSS 代碼的選擇器層級將越深,這往往是大家不愿意看到的一點。這個特性現(xiàn)在正被眾多開發(fā)者濫用。
選擇器嵌套為樣式表的作者提供了一個通過局部選擇器相互嵌套實現(xiàn)全局選擇的方法,Sass 的嵌套分為三種:
1、選擇器嵌套
假設(shè)我們有一段這樣的結(jié)構(gòu):
<header> <nav> <a href=“##”>Home</a> <a href=“##”>About</a> <a href=“##”>Blog</a> </nav> <header>
想選中 header 中的 a 標(biāo)簽,在寫 CSS 會這樣寫:
nav a { color:red; } header nav a { color:green; }
那么在 Sass 中,就可以使用選擇器的嵌套來實現(xiàn):
nav { a { color: red; header & { color:green; } } }
在編輯器第 2 行和第 5 行輸入正確的選擇器,使其編譯出來的CSS如下:
nav a { color: red; } header nav a { color: green; }
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報