首页 > 其他分享 >less-嵌套样式

less-嵌套样式

时间:2023-09-15 14:13:28浏览次数:39  
标签:40px less 样式 padding 嵌套 10px border color

.box {
    width: 500px;
    padding: 20px;
    border: 1px solid #666;
    border-radius: 10px;

    // & 符号代表上一层的选择器. 父级
    &:hover {
        background-color: green;
        box-shadow: 0 0 20px black;
    }

    h2 {
        font: 40px/40px '微软雅黑'; //字体大小/行高
    }

    p {
        color: green;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            background-color: yellowgreen;
            height: 30px;
            margin-bottom: 10px;

            &:hover {
                a {
                    color: aqua;
                }
            }

            a {
                color: white;
                padding: 10px 4px;
            }
        }
    }
}

image

标签:40px,less,样式,padding,嵌套,10px,border,color
From: https://www.cnblogs.com/unity-yancy/p/17704881.html

相关文章

  • less-匹配模式
    //匹配模式有点像函数重载.arrow{width:0;height:0;overflow:hidden;border-width:10px;border-color:transparenttransparentlimegreentransparent;border-style:dasheddashedsoliddashed;}.triangle(top,@b-width:5px,@b-color:red){bo......
  • less-变量
    @width:100px;//定义变量@default-border:1pxsolidblack;//变量名,变量值都可以被定义为变量//变量名被定义为变量后,使用时需要加@{}引用@bacc:background-color;.box{width:@width;height:@width/2;@{bacc}:limegreen;border-radius:4px;borde......
  • less-混合
    @width:200px;@border:1pxsolidred;div{margin:10px0;border-radius:10px;}.txt-center{font-size:20px/40px'微软雅黑';color:#fff;text-align:center;line-height:@width;background:green;}//混合:把另一个选......
  • less-基础用法
    什么是less?less,suss,stylus都是css的动态扩展语言.三种都大同小异官网:https://less.nodejs.cn/怎么用?与Node.js一起使用:安装:npminstall-gless编译:lesscstyles.lessstyles.css在浏览器使用:<linkrel="stylesheet/less"type="text/css"href=......
  • 关于element-plus框架一些样式的修改
    一、关于使用element框架一些测试建议覆盖的样式1.取消按钮的focus效果(1)css样式覆盖//element按钮部分伪类样式覆盖//用于覆盖element按钮focus的样式.el-button:not(.is-link):not(.is-text):not(.is-disabled):not(.is-has-bg):focus{color:var(--el-button-text-......
  • Serverless = FaaS + BaaS
    Serverless架构是采用FaaS(函数即服务)和BaaS(后端服务)服务来解决问题的一种设计。到底什么是Serverless?无服务器硬件+虚拟机+操作系统+数据库+中间件/运行库+应用+函数全包,用户只交集在业务代码上,更加减少发布运维的工作laaS-->PaaS-->SaaS-->FaasFaaS就是Functionasaservi......
  • Serverless 数仓技术与挑战 - 张雁飞|3306π
    09月16日(本周六)下午,DatabendLabs 联合创始人张雁飞将作为嘉宾参与由3306π组织的「3306π数据库朋友圈」主题分享。大纲在本次分享中,我们将介绍一款新型Serverless数仓技术。该技术旨在解决传统数仓在扩展性、成本和管理上的局限性,能够大幅提升性能并降低成本。我们还将......
  • 杭州站|阿里云 Serverless 技术实践营(Serverless + 大数据)开启报名!
    活动简介“Serverless技术实战与创新沙龙”是一场以Serverless为主题的开发者活动,通过一个下午的时间增进对Serverless技术的理解,快速上手,活动受众以关注Serverless技术的开发者、企业决策人、云原生领域创业者为主,活动形式为演讲、动手实操。Serverless架构天生适用......
  • HSSFWorkbook And SXSSFWorkbook样式设置
    直插正题:HSSFWorkbook 创建样式:HSSFCellStylestyle=workbook.createCellStyle();一、设置背景色: cellStyle.setFillForegroundColor((short)10);//设置背景色,颜色的索引还必须是0x08~0x40(8~64)的数字 自定义颜色,如果不使用POI提供的默认颜色,就需要自定......
  • What's the difference between Industrial Maxon Wireless 802.11ac AP and router
    ThemaindifferencebetweenindustrialAPsandroutersistheirintendeduse.IndustrialAPsaredesignedforuseinharshenvironments,suchasfactories,warehouses,andoutdoorlocations.Theyaretypicallymoreruggedandhaveawidertemperaturerang......