ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

Less从入门到精通——嵌套规则(附学习视频、源码及笔记)

2021-04-02 17:29:53  阅读:126  来源: 互联网

标签:元素 header color Less li 嵌套 源码 选择器 ul


完整学习视频及资料在这里哦~
链接:https://pan.baidu.com/s/1XHxElnc2N-qwg2f2J30Qyw
提取码:4k8t

嵌套规则

       嵌套规则它模仿了HTML的结构,让我们的CSS代码更加简洁明了清晰

1. 子元素嵌套

可以将子元素的样式直接写在父元素的里面,形成嵌套

header{
	color:green;
	// 表示选择 header的子元素p 并设置其样式
	p{					
	    color:red;
	}
}
// 输出为:
header {
  color: green;
}
header p {
  color: red;
}

2. 父元素选择器 (&在前)

       上面讲解了怎么选到子元素,那如果不是子元素呢,这里的& 就表示当前选择器的所有父选择器。

header{
      :hover{				      // 没有写 & 会以为是给子元素的样式
            color:green;
      }
      p{
            &:hover{			      // 而 & 表示选中了当前选择器 即 p
                  color:pink;
            }
      }
}
// 输出为
header :hover{					// 输出时“ :” 前有空格,经过header的所有子元素都会执行以下CSS样式
	background-color:green;		        // 只要经过header的孩子都会变色
}
header p:hover{					// 输出时没有空格
	color:pink;				// 鼠标经过p标签,字体颜色变成粉色
}

所以为了避免混乱,伪元素前不要忘记加 “ & ” 哟~

3. 改变选择器的顺序(&在后)

       将& 放在当前选择器之后,就会将当前选择器插入到所有的父选择器之前

.header{
      p{
            .conter &{		 // 注意 & 前有空格
                  color:red;
            }
            .footer&{		// 没有空格时,提到前面时也没有空格
                  color:green;
            }
      }
}
// 输出为
.conter .header p{
      color:red;
}
.footer.header p {
      color: green;
}

4. 组合使用生成所有可能的选择器列表(两个&)

.header,ul,li{
    & &{
        color: pink;
    }
}
// 输出为:
.header .header,
.header ul,
.header li,
ul .header,
ul ul,
ul li,
li .header,
li ul,
li li {
  color: pink;
}
// 输出结果时选择器总个数为 n²
// 解析
// 第一个 & 表示当前父选择器,即先取 “ .header ”,选中之后第二个 & 将其插入到所有父元素之前,
// 即:将其分别插入到3个父选择器之前,然后继续取“ ul ”相同做法,依次类推,就形成了这样的组合

       此为2和3的一种推广形式,我们可以根据自己的功能需求选择合适的用法。
以上均为自己理解,若有不当,还请指出~ _
笔记是不断更新的哦~

标签:元素,header,color,Less,li,嵌套,源码,选择器,ul
来源: https://blog.csdn.net/kMONSTER4/article/details/115404187

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有