嵌套,是less里面最有意思的小东西,比如说我们经常性的去写一些列表性的东西
html
<ul class="list">
<li><a href="#">links</a><span>2018-07-16</span></li>
<li><a href="#">links</a><span>2018-07-16</span></li>
<li><a href="#">links</a><span>2018-07-16</span></li>
</ul>
less
/*
一般这么写
.list{}
.list li{}
.list a{}
.list span{}
*/
.list{
  width:600px;
  margin: 30px auto;
  padding:;
  list-style: none;   li{
    height: 30px;
    line-height: 30px;
    background-color: pink;
    margin-bottom:5px;
  }
  a{//不要写在li里面,尽量避免嵌套层级过深
    float: left;
  }
  span{
    float: right;
  }
}
=>
/*
一般这么写
.list{}
.list li{}
.list a{}
.list span{}
*/
.list {
  width: 600px;
  margin: 30px auto;
  padding:;
  list-style: none;
}
.list li {
  height: 30px;
  line-height: 30px;
  background-color: pink;
  margin-bottom: 5px;
}
.list a {
  float: left;
}
.list span {
  float: right;
}
除了这个,它还提供一个更好玩的小东西,加hover的时候之前这样写
/**
.list a{}
.list a:hover{}
*/
.list{
  width:600px;
  margin: 30px auto;
  padding:;
  list-style: none;   a{
    float: left;
    //& 代表上了一层的选择器
    &:hover{
      color:red;
    }
  }
}
=>
/**
.list a{}
.list a:hover{}
*/
.list {
  width: 600px;
  margin: 30px auto;
  padding:;
  list-style: none;
}
.list a {
  float: left;
}
.list a:hover {
  color: red;
}
用起来还是蛮方便的

less嵌套规则的更多相关文章

  1. XHTML标签的嵌套规则分析

    在 XHTML 的语言里,我们都知道:ul 标签包含着 li.dl 标签包含着 dt 和 dd——这些固定标签的嵌套规则十分明确.但是,还有许多标签是独立的,它们没有被捆绑在一起,比如 h1.div. ...

  2. HTML5标签嵌套规则

    × 目录 [1]分类 [2]子元素 [3]总结 前面的话 在html5中,<a>元素的子元素可以是块级元素,这在以前是被认为不符合规则的.本文将详细介绍html5的标签嵌套规则 分类 ht ...

  3. HTML标签的嵌套规则

    我在平时在写html文档的时候,发现不太清楚标签之间的嵌套规则,经常是想到什么标签就用那些,后来发现有些标签嵌套却是错误的.通过网上找资料,了解了html标签的嵌套规则. 一.HTML 标签包括 块级 ...

  4. XHTML标签的嵌套规则--很基础很重要

    XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...

  5. HTML的奇葩嵌套规则

    一.HTML 标签包括 块级元素(block).内嵌元素(inline) 1.块级元素 一般用来搭建网站架构.布局.承载内容……它包括以下这些标签: address.blockquote.center ...

  6. html标签的嵌套规则分析

    1.a标签最好不要嵌套块级元素,可以嵌套内联元素,但是不能嵌套a标签和input之类的标签.能嵌套的标签像,等等. 2.ul和ol的子元素不能是别的元素只能是li,不能是别的比如div等,但是li中可 ...

  7. 一天搞定HTML----标签的嵌套规则06

    标签的嵌套规则 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. Less的嵌套规则

    Less的嵌套规则 在使用标准CSS时,要为多层嵌套的元素定义样式,要么使用后代选择器从外到内的嵌套定义,要么给这个元素加上类名或 id 来定义.这样的写法虽然很好理解,但维护起来很不方便,因为无法清 ...

  9. Unit 3.标签的分类和嵌套规则

    一.标签分类 HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素. 常用的块状元素: <div> <p> <h1>~<h6> <ol ...

  10. HTML(二)HTML元素(整体结构,块级元素,内联元素,结构元素,交互元素,元素嵌套规则)

    HTML整体结构解释 <!DOCTYPE html> // 文件应以"<!DOCTYPE ......>"首行顶格开始,推荐使用"<!DOC ...

随机推荐

  1. Informix网页数据维护客户端工具

    Informix是IBM公司出品的关系数据库管理系统,目前还有在银行,电信等行业使用,Informix的客户端工具很少,数据维护及可视化比较麻烦,现在TreeSoft数据库管理系统已支持Informi ...

  2. from表单上提交的数据都去了哪里呢?

    from表单上提交的数据都去了哪里呢? 一个简单的from案例如下: <form> 姓名:<br> <input type="text" name=& ...

  3. 使用SWO代替UART,实现Printf打印功能

    JTAG接口中,有个SWO引脚,一直没有在意,也没有去研究过是干嘛用的.直到发现ST-LINK V2-1上也有个SWO引脚,于是去研究学习它的作用,用起来相比UART方得便多. 本文内容已经整理成PD ...

  4. 【Docker】:使用docker安装mysql,挂载外部配置和数据

    普通安装 1.下载镜像,mysql 5.7 docker pull mysql:5.7 2.创建mysql容器,并后台启动 docker run -d -p 3306:3306 -e MYSQL_US ...

  5. 1266: gcd和lcm(Java)

    WUSTOJ 1266: gcd和lcm 参考 1naive1的博客 Description   已知a,b的最大公约数为x,也即gcd(a,b)=x; a,b的最小公倍数为y,也即lcm(a,b)= ...

  6. Linux驱动函数解读

    一.kmalloc().kzalloc()和vmalloc() 这三个函数都可以分配连续的虚拟内存 除此之外,这三个函数的区别有: 1. kmalloc()和kzalloc()函数分配的物理内存也是连 ...

  7. windows通过gcc编译代码

    1.将gcc添加到环境变量 2.检查gcc是否安装成功 cmd下输入gcc –v 3.cd进入需要编译源文件的目录 4.dir查看当前目录下是否有需要编译的文件(linux下用ls) 5.编译文件(H ...

  8. go if 判断 完成随机分数的评级

    1 go中 所有的大括号要跟在 当前语句的后面不能换行 例如: if a>0  { func getUser(){ for { 2关于随机分数的生成 种子的设置放到循环中会是重复的数字,这是可以 ...

  9. shell习题第21题:计算数字的个数

    [题目要求] 计算文档a.txt中每一行出现数字的个数并且要计算一下整个文档中一共出现了几个数字 例如a.txt如下: sdhhyh776dbbgbfg dhhdffhhhs556644382 运行结 ...

  10. pycharm使用pylint

    # 与能查到的多数博文做法不太一样,自认为这样更简单有效 1. 下载插件 https://plugins.jetbrains.com/plugin/11084-pylint 2. 从磁盘安装插件 注意 ...