SASS第十篇 层级结构

2020-10-28 16:04:24 浏览数 (1)

代码语言:javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
/*.father{
  width: 300px;
  height: 300px;
  background: red;
  &:hover{
    width: 100px;
    height: 100px;
    background: yellow;
  }
  .son{
    width: 200px;
    height: 200px;
    background: blue;
  }
}*/
.father {
  width: 300px;
  height: 300px;
  background: red;
}
.father:hover {
  width: 100px;
  height: 100px;
  background: yellow;
}
.father .son {
  width: 200px;
  height: 200px;
  background: blue;
}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

//后代是选择器那里有空格的

0 人点赞