web-rem布局-less嵌套

最新推荐文章于 2024-09-04 11:56:14 发布

Dowen00

最新推荐文章于 2024-09-04 11:56:14 发布

阅读量41

点赞数

文章标签：前端 less 数学建模

本文链接：https://blog.csdn.net/m0_63171030/article/details/131414346

版权

本文是一个关于Less预处理器的实践示例，展示了如何在Less中进行嵌套选择器的使用，包括对子元素样式的定义，以及处理伪类、交集选择器和伪元素选择器的方法。通过一个简单的HTML结构和对应的Less代码，解释了Less自动编译成CSS的过程。

摘要由CSDN通过智能技术生成

less嵌套.html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>less嵌套练习</title>

<link rel="stylesheet" href="nest.css">

</head>

<body>

<div class="header">

<a href="#">文字</a>

</div>

</body>

</html>

nest.less:

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    // 1.less嵌套 子元素的样式直接写到父元素里面就好了
    a {
        color: red;
        text-decoration: none;
        // 2.如果有伪类、交集选择器、伪元素选择器，我们内层选择器的前面需要加& 
        &:hover {
            color: blue;
        }
    }
}

less文件保存自动生成的nest.css文件：

.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: red;
  text-decoration: none;
}
.header a:hover {
  color: blue;
}