9_less中的层级结构

最新推荐文章于 2022-11-17 16:21:08 发布

无名之辈无名之辈

最新推荐文章于 2022-11-17 16:21:08 发布

阅读量543

点赞数

分类专栏：前端 less

本文链接：https://blog.csdn.net/ice_stone_kai/article/details/110729281

版权

前端同时被 2 个专栏收录

81 篇文章 1 订阅

订阅专栏

less

11 篇文章 0 订阅

订阅专栏

如果在某一选择器的 {} 中直接写上了其他的选择器,会自动转换成后代选择器,如:

.father{
  .son{
  
  }
}

此时编译为css就是(好像这个有点废话了):

.father .son{

}

& 的作用是,告诉less在转换时,不要用后代来转换,直接拼接在当前选择器的后面即可
例如:

.father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .son {
    &:hover {
      background: skyblue;
    }
    width: 200px;
    height: 200px;
    background: blue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

编译的css:

.father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.father .son {
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.father .son:hover {
  background: skyblue;
}

此时符合我们的预期效果:鼠标hover到son上面变颜色,hover在father上不会改变

那么来看下less代码son中的hover如果前面不加 & 有啥效果

less


.father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .son {
    // 如果此时的 hover 前面不加 & ,那么转换成css时,会将hover样式添加给 father 和 son,
    // 但是在浏览器中 hover 并不起作用
    :hover {
      background: skyblue;
    }

    width: 200px;
    height: 200px;
    background: blue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

编译的css:

.father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
.father .son {
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.father .son :hover {
  background: skyblue;
}

此时发现,你hover哪个都不变,不符合预期效果

&还是很好用的,其他用法可以查看这位老哥的博客

使用 & 提哦按家子元素:
html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="css/12_2.css">
</head>
<body>
<div class="father">
    <!--    <div class="son"></div>-->
</div>
</body>
</html>

less:

.father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*  .son {
      &:hover {
        background: skyblue;
      }

      width: 200px;
      height: 200px;
      background: blue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }*/
  &::before {
    content: "子元素";
    display: block;
    background: #b32323;
    width: 100px;
    height: 100px;
  }
}

无名之辈无名之辈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
9_less中的层级结构

如果在某一选择器的 {} 中直接写上了其他的选择器,会自动转换成后代选择器,如:.father{ .son{ }}此时编译为css就是(好像这个有点废话了):.father .son{}& 的作用是,告诉less在转换时,不要用后代来转换,直接拼接在当前选择器的后面即可例如:.father { width: 300px; height: 300px; background: red; position: absolute; top: 5.
复制链接

扫一扫