Day35less--嵌套

image
less文件

.father{
    color: red;
    .son{
       width: 200px;
    }
    a{
        color: green;
        /* &表示的是当前选择器,代码写到谁的大括号里就代表谁
        作用是在原有的基础上不会生成后代选择器
        应用:配合hover伪类或者nth-child使用 */
        &:hover {
            color: blue;
        }
    }

    // 用占位符代替a并且可以将代码并入a中
    // a:hover{
    //     color: blue;
    // }
}

css文件

.father {
  color: red;
}
.father .son {
  width: 200px;
}
.father a {
  color: green;
  /* &表示的是当前选择器,代码写到谁的大括号里就代表谁
        作用是在原有的基础上不会生成后代选择器
        应用:配合hover伪类或者nth-child使用 */
}
.father a:hover {
  color: blue;
}

posted @ 2025-12-20 20:38  冰涿  阅读(2)  评论(0)    收藏  举报