网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

Less学习笔记--Nestedrules(嵌套规则)-创新互联

Less嵌套规则模仿了HTML结构,这样写可以让代码更简洁、更具层次感,上一小段代码先了解下

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的伊金霍洛网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

Less代码:

#header{
  color:black;
  .navigation{
    font-size:12px;
  }
  .logo{
    width:300px;
  }
}

CSS编译代码:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

使用这种方法也可以在混合中包含伪类,常见的用法就是css reset里面的清除浮动

Less代码:

.clearfix{
  zoom:1;
  &:after{
    content:'';
    display:block;
    clear:both;
  }
}

CSS编译代码:

.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

其中,&运算符表示一个嵌套规则的父选择器,常用于修改一个类或者定义伪类选择器,比如:

Less代码:

a{
  color:blue;
  &:visited{
    color:red;
  }
  &:hover{
    color:yellow
  }
}

CSS编译代码:

a {
  color: blue;
}
a:visited {
  color: red;
}
a:hover {
  color: #ffff00;
}

在上面清除浮动的代码中,如果不加&,会是什么效果呢?

Less代码:

.clearfix{
  zoom:1;
  :after{
    content:'';
    display:block;
    clear:both;
  }
}

CSS编译代码:

.clearfix {
  zoom: 1;
}
.clearfix :after {
  content: '';
  display: block;
  clear: both;
}

不难发现,这是一个典型的后代选择器,并不是我们想要的效果

&选择符的另一个非常重要的用途就是生产重复的类名,比如在写CSS公共样式的时候会有各种各样的button样式

Less代码:(在这里复习下less中引入路径的写法)

@p_w_picpaths:'../p_w_picpaths';
.button{
  &-ok{
    background:url('../p_w_picpaths/1.jpg')
  }
  &-cancel{
    background:url('@{p_w_picpaths}/2.jpg')
  }
  &-custom{
    background:url('@{p_w_picpaths}/3.jpg')
  }
}

CSS编译代码:

.button-ok {
  background: url('../p_w_picpaths/1.jpg');
}
.button-cancel {
  background: url('../p_w_picpaths/2.jpg');
}
.button-custom {
  background: url('../p_w_picpaths/3.jpg');
}

&选择符可以在选择器中多次出现,反复引用父选择器,而不是重复父选择器的类名

Less代码:

.link{
  &+&{
    color:red;
  }
  & &{
    color:purple;
  }
  &&{
    color:silver;
  }
  &, &ish{
    color:pink;
  }
}

CSS编译代码:

.link + .link {
  color: red;
}
.link .link {
  color: purple;
}
.link.link {
  color: silver;
}
.link,
.linkish {
  color: pink;
}

&选择符表示所有的父选择器而不是特指最近的父选择器

Less代码:

.grand{
  .parent{
    &>&{
      color:red;
    }
    & &{
      color:green;
    }
    &&{
      color:blue;
    }
    &,&ish{
      color:black;
    }
  }
}

CSS编译代码:

.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: black;
}

&选择符还可以用于生成一个逗号分割列表的所有可能的选择器排列

Less代码:

p, a, ul, li {
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}

CSS编译代码:

p,
a,
ul,
li {
  border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
  border-top: 0;
}

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


网页题目:Less学习笔记--Nestedrules(嵌套规则)-创新互联
文章路径:http://bjjierui.cn/article/cshops.html

其他资讯