less学习与实战

一、 less与css的区别
二、 功能概览
三、伪类的应用
四、建议书写顺序

二、功能概览

前言：引用方式
按顺序引入如下两个文件

问题：vscode为什么live server 可以编译页面，default browser不能展示样式？

1. 变量
   可以以变量的方式设置样式。

2. 混合
   

3. 嵌套
   【！注意通常情况下嵌套的写法表示为后代选择器，不是父子关系！】
   
   【例：全局有样式A，父中B中包含样式A，那么元素的样式会以被包含的样式A的为准】【&的使用】——【表示并且】【被应用的元素需要同时具有&并且的两个样式名】首先了解一下css中的以下写法：
   与less中&的写法做对比：
   css写法：

.head{
	.conent{
	 }
	&.menu{
	 }
}

less的写法

.head{}
.head .content{}//父子关系
.head.menu{}//并且关系。某元素同时还有head，menu样式名，改样式才被作用

4. 运算
   计算的结果以最左侧操作数的单位类型为准;算术运算符 +、-、*、/ 可以对对任何数字、颜色或变量进行运算。px-cm的转换失去意义，不进行单位换算。
   
5. 作用域

//【 Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。】
//查找顺序1，2，3；
//通过2，发现变量不必在引用前先定义；

三、伪类与伪元素的应用

1. 什么是伪类
   css伪类有6种，分别为：动态伪类、目标伪类、语言伪类、元素状态伪类、结构伪类、否定伪类。
   1、动态伪类

不同的状态，使用不同的样式。

E:link ：链接并未被访问过

E:visited ：超链接并已被访问过

E:active ：选按下鼠标未松开

E:hover ：停留在元素E上

E:focus ： 选择匹配的E元素，而且匹配元素获取焦点
A、示例

B、

C、

D、书写顺序
【总结：hover要写在link，visited之后（否则不生效），active要写在hover之后（否则不生效）】

2、结构伪类

这个就比较多了，平时用的也比较频繁。
E:fisrt-child ：作为父元素的第一个子元素的元素E。与E:nth-child(1)等同

E:last-child ：作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

E:root ：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
等等。

2. 伪元素
   常见——：before，：after

【 ：before】在元素之前添加内容
【 ：after 】在元素之后添加内容
如下代码所展示，添加的内容为当前元素内部的开头和结尾，而不是在该元素外增加！
【p元素内部的开头，pseudo元素内部的结尾】【伪元素属于主元素的一部分】
【其中&的使用代表父级元素】

【未表明具体某一个元素对应after，before，则为text-one，text-two，（以及其他子元素如果存在的话）都增加content】

总结：
伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

四、建议书写顺序：
A、hover要写在link，visited之后（否则不生效），active要写在hover之后（否则不生效；可按照link，visited，hover，active的顺序。