Less-css扩展指定多层嵌套选择器样式

//扩展Extend

Use Method:以在study上扩展指定多层嵌套选择器样式

//Share style
.test{
    font-size:18px;
    color:#ffffff;
    ul{
        width:100px;
        height:50px;
        li{
            float:left;
            margin-right:10px;
            width:50px;
            height:50px;
        }
    }
}

//grammar 1
.study{
    &:extend(.test ul li);
}

//grammar 2
.study:extend(.test ul li){}

//输出css
.test {
  font-size: 18px;
  color: #ffffff;
}
.test ul {
  width: 100px;
  height: 50px;
}
.test ul li,
.study {
  float: left;
  margin-right: 10px;
  width: 50px;
  height: 50px;
}

作者:leona

原文链接:http://www.cnblogs.com/leona-d/p/6296218.html

版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接

时间: 2024-08-01 14:21:52

Less-css扩展指定多层嵌套选择器样式的相关文章

less可以做什么?less详解!(less嵌套选择器实现纯CSS二级导航)

前端技术众多,作为一名前端工程师,我们每接触新技术首先要懂得此技术的优势和劣势,这是最基本的.往深入了说还需要懂得技术的应用场景,与之配合的技术等,方便为以后架构做准备.而less作为一门CSS预处理语言,拥有函数式变成的特点,主要优点就是高效.主要适用于包含众多CSS的大型项目.主要体现在:项目公共样式的定义,如页面主色.固定数值(宽.高.时间等).公用样式模板.封装省略浏览器兼容前缀的函数等. 1.less的两种使用方式 1.1 直接调用需要引入less.js,和less样式文件,需要注意的

CSS 分组 和 嵌套 选择器

Grouping Selectors 在样式表中有很多具有相同样式的元素. h1{color:green;}h2{color:green;}p{color:green;} 为了尽量减少代码,你可以使用分组选择器. 每个选择器用逗号分隔. 在下面的例子中,我们对以上代码使用分组选择器: 实例 h1,h2,p{color:green;} 尝试一下 » 嵌套选择器 它可能适用于选择器内部的选择器的样式. 在下面的例子,为所有p元素指定一个样式,为所有元素指定一个class="marked"的

css基础 给一个标记的后代中 指定的标签 或者指定标签的指定class名称 添加样式 (后代多级的)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ex1: code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

css border-bottom(指定下边线的样式、宽度及颜色)

border-bottom(指定下边线的样式.宽度及颜色) border-bottom: 值: border-bottom-style:值; border-bottom-color: 值; border-bottom-width:值; 如: border-bottom: solid 1px #ffff00; border-bottom-style: outset; border-bottom-color: #0000ff; border-bottom-width:15px; border-bot

CSS扩展“less&quot;和”sass“

css扩展技术是对css原生代码一种扩展,其中less和sass就是css扩展技术两种方式,通过扩展技术,可以使我们在写css代码时候,更加的方便和快捷. 首先要了解css扩展技术的含义:扩展技术并不是另外一种全新的技术,它是建立在css基础上进行扩展,实现一些css原生代码所不能实现的功能,其次less和sass不能单独在浏览器上运行,需要进行编译: less能实现同js一样的变量.函数.混合参数等功能,通常用@标志开始,后面接变量名字,具体如实例:@winth.@color.@height等

CSS扩展技术-less

在原来的CSS基础上扩展一些编程语言 CSS引用扩展技术时需要编译器编译<编译工具Koala 1.less<比较早期的CSS扩展技术> a.less语法:后缀名<.less> //变量的定义 @color:blue; @body-color:blue; @div-color:blue; @w:100px; @h:100px; body{ height:500px; border:1px solid @body-color; } div{ width:@w; height:@h

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 ???叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 ????特点: ??????1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠 ??????2.使数据和

前端——CSS的引入方式、选择器

前端--CSS的引入方式.选择器 什么是CSS? 层叠样式表(就是用来调节标签的样式) CSS注释 /*单行注释*/ /*多行注释1 多行注释2 多行注释3 */ 注释的使用 css应该是一个独立的文件 /*页面通用样式*/ /*顶部导航栏样式*/ /*侧边菜单栏样式*/ -- css语法结构 选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;--} css三种引入方式 外部css文件(最正规的书写方式) /*mycss*/ /*这是一个非常牛逼的页面的css样式文件*/ /

做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致

最近在做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致.大家可以查看这个Demo(记得打开Chrome DevTools). 就如上图所示,你可以发现,原本指定的字体大小是24px,但是最终计算出来的却是53px,看到这诡异的结果,我心中暗骂一句:这什么鬼! 随后开始对问题各种排查:某个标签引起的?某个CSS引起的?又或者是某句JS代码引起的.通过一坨坨的删代码,发现貌似都不是.我不禁又骂,到底什么鬼!不过中间还是发现了一些端倪:当页面中的标签数量或者文本数