基于 less 初体验 这篇文章，在该文章当中其实已经出现了 less 中的层级结构，我将该代码贴在了下方
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>less中的层级结构</title>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
index.less
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.son {
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
通过如上的写法可以看出 css 的层级结构和 html 的结构已经是一模一样了，这样也方便了我们进行阅读和维护了，但是如上的内容并不是我们这次的重点内容，这次我要介绍的内容为，在这种层级结构当中为何使用伪类和伪元素，什么是伪类和伪元素呢，先来看一个小小的需求案例，我现在要求 .son 鼠标移上去 (hover) 改变该元素的背景颜色，在过去我们如何实现这个需求的，代码如下
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.son {
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.son:hover {
background: green;
}
如果按照如上的写法进行编写，就违背了 less 的初衷，less 的初衷就是一个整体的内容都需要放到一个整体当中，当前 hover 代码并没有放到一个整体当中
先来看如果在某一个选择器的 {} 中直接写上了其它的选择器，会自动转换成后代选择器
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.son {
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
改造如上 hover 的代码
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.son {
:hover {
background: green;
}
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
经过改造后的代码发现，:hover 也使用后代来转换了，使用 & 改造如上 hover 代码，& 的作用，是告诉 less 在转换的时候不用用后代来转换，直接拼接在当前选择器的后面即可
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.son {
&:hover {
background: green;
}
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
如上是关于伪类的添加，在来看看关于伪元素的添加，如下
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
&::before {
content: "子元素";
display: block;
background: yellowgreen;
width: 100px;
height: 100px;
}
}
- 如有不正确之处，还请大佬指正????
