sass父选择器编辑方式

⽗选择器 &

  • ⽗选择器 & 的使⽤是代表当前作⽤域所有的结构集合
  • 如果需要使⽤伪类,必须使⽤&进⾏占位
div {
   width: 200px; 
   height: 200px;
   background-color: red;
   p {
     color: white;
     font-size: 20px;
     a {
       text-decoration: none;
     }
     &:hover {
       color: blue;
     }
   }
 } 

<div>   <p>请访问<a href="#">这⾥</a></p> </div>

div {
  width: 200px;
  height: 200px;
  background-color: red;
}
div p {
  color: white;
  font-size: 20px;
}
div p a {
  text-decoration: none;
}
div p:hover {
  color: blue;
}

由上面可以看到,关于父选择器的使用在sass中还是在嵌套中编辑,但是转换出的css显示使用的是父元素选择器

posted @ 2021-04-23 17:43  山茶-峰  阅读(119)  评论(0编辑  收藏  举报