亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

[Sass]嵌套-選擇器嵌套

Sass 中還提供了選擇器嵌套功能,但這也并不意味著你在 Sass 中的嵌套是無節制的,因為你嵌套的層級越深,編譯出來的 CSS 代碼的選擇器層級將越深,這往往是大家不愿意看到的一點。這個特性現在正被眾多開發者濫用。

選擇器嵌套為樣式表的作者提供了一個通過局部選擇器相互嵌套實現全局選擇的方法,Sass 的嵌套分為三種:

  • 選擇器嵌套
  • 屬性嵌套
  • 偽類嵌套

1、選擇器嵌套

假設我們有一段這樣的結構:

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想選中 header 中的 a 標簽,在寫 CSS 會這樣寫:

nav a {
  color:red;
}

header nav a {
  color:green;
}

那么在 Sass 中,就可以使用選擇器的嵌套來實現:

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

 

任務

在編輯器第 2 行和第 5 行輸入正確的選擇器,使其編譯出來的CSS如下:

nav a {
   color: red;
}

header nav a {
   color: green;
}
?不會了怎么辦
||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?