HTML5学堂-码匠 HTML5学堂

您当前位于:开发工具 ——> 快速开发CSS的利器 - less系列 嵌套规则

快速开发CSS的利器 - less系列 嵌套规则

2015/05/04 12:57:29 | 作者:HTML5学堂(码匠) | 分类:开发工具 | 关键词:less,快速开发,嵌套规则

快速开发CSS的利器 - less 嵌套规则

HTML5学堂:嵌套,在我们HTML代码中一直都在使用,如div中的p元素等,对于我们样式的书写,需要使用div p {} 进行样式的指定,这也就是我们的后代选择器。不过写过项目的人都知道,为了防止样式的覆盖,每种选择器都是一大长串,写起来很麻烦~本文给大家讲解的是less 嵌套规则,可以解决掉样式覆盖的问题。

less 嵌套规则

嵌套,在我们HTML代码中一直都在使用,如div中的p元素等,对于我们样式的书写,需要使用div p {} 进行样式的指定,这也就是我们的后代选择器。不过写过项目的人都知道,为了防止样式的覆盖,每种选择器都是一大长串,写起来很麻烦~

less利用嵌套的书写方式,让我们在写后代选择器的时候有了新的方法。原来后代选择器的书写方式:

  1. .arclist dl {
  2.     padding: 10px 20px;
  3.     border-bottom: 1px dotted #ccc;
  4. }
  5. .arclist dl:after {
  6.     .common-