嵌套,是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. Java线程安全队列Queue实现原理

    原文链接:https://www.cnblogs.com/DreamRecorder/p/9223016.html 在Java多线程应用中,队列的使用率很高,多数生产消费模型的首选数据结构就是队列.J ...

  2. BeginLinux Programming chapter16: X11桌面系统简介

    当前两个最流行的linux desktop environment: GNOME 和KDE, 两者对应的图形库分别是 GTK+ 和 QT. GNOME与KDE与X11的关系: X defines no ...

  3. 基于tesseract-OCR进行中文识别

    1. 环境准备 1.1 下载 下载Tesseract-OCR安装包,地址为: https://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr-w32- ...

  4. 【牛客网】Longest Common Subsequence

    [牛客网]Longest Common Subsequence 发现只有d数组最格路 于是我们把前三个数组中相同的数记成一个三维坐标,同一个数坐标不会超过8个 从前往后枚举d,每次最多只会更新不超过8 ...

  5. nginx 设置开机启动

    设置nginx开机启动chkconfig --add /etc/init.d/nginx chkconfig nginx on

  6. java获取端口号,不用request

    Integer port = null; MBeanServer mBeanServer = null; List<MBeanServer> mBeanServers = MBeanSer ...

  7. 面试经典算法:马拉松算法,最长回文子串Golang实现

    求一个字符串中最长的回文子串. package main import "fmt" /* 马拉松算法,求最长回文子串,时间复杂度:线性 */ func main() { // 回文 ...

  8. (十八)SpringBoot之发送QQ邮件

    一.引入maven依赖 <dependencies> <dependency> <groupId>org.springframework.boot</grou ...

  9. C#特性 详解

    一:Conditional:条件特性,预定义了一个条件方法. 使用方法: [Conditional("DEBUG")] public void test() { MessageBo ...

  10. myeclipse 出现换行符和空格符 解决方案 换行出现乱码

    请参看百度经验 https://jingyan.baidu.com/article/acf728fd2639e4f8e510a399.html myeclipse 2014 自定义视图Customiz ...