共计 1813 个字符,预计需要花费 5 分钟才能阅读完成。
语法 1
.nl-className
.nl-[class1_class2_class3]
实例 1
<ul class="nl-[ac white inline us-w,h,lh-50 us-fs-23 us-mr-10 uc-bg-f00]">
<li> 子 </li>
<li> 级 </li>
<li> 管 </li>
<li> 控 </li>
</ul>
运行成果 1
具体解释 1
1、nl-class1 nl-class2,即给子元素增加 class1 class2 款式。
2、nl-[class1 class2 class3],须要一次增加多个款式时,能够应用方括号框将它们起来;另外,如果须要 us-h-50 uc-c-f00 这样的 yus 款式作用到子级元素,也须要应用方括号框起来。
3、nl-[class1_class2_class3],上一条中 class2 前后都有空格,这将会被浏览器判断为一个款式,作用在子级的同时,也会对父级产生影响。如果只心愿影响子级元素时,能够用下划线来代替空格,即可解决问题。
语法 2
.nl-className-dom
.nl-[class1_class2_class3]-dom
实例 2
<ul class="test">
<li> 子 </li>
<li> 级 </li>
<li> 管 </li>
<li> 控 </li>
</ul>
<i class="nl-[ac white inline us-w,h,lh-50 us-fs-23 us-mr-10 uc-bg-f00]-test !hidden"></i>
运行成果 2
具体解释 2
1、与实例 1 的成果雷同,然而代码更简洁了一些,因为某些伪道学所提倡的那样,在 html 页面中不要写太多 style css 代码,看起来不难看。
2、利用 nl-[class1 class2 class3]-dom 指令,能够将庞杂的代码对立放在页面最底部,这样就能够在下面看 class 名称,到上面去找 class 对应的款式了,更加便于浏览了解;当然了,少数编辑器或脚手架按 ctrl 键,点击款式名称时,能够间接定位到对应的 css 文件中去,那样其实也挺不便的。
3、当然,咱们也能够利用 yus 框架的《include 指令》,将这些款式蕴含在另外一个页面中,只是须要留神的是 yus 的 include 指令是异步的,所以如果有相干的 js 代码也要放在 include 页面中,免得产生谬误。
4、代码中的 hidden 是 yus 《内置款式》,后面加一个感叹号,表式强制模式,毕竟这一部分是不心愿显示在页面中的,其实能够在页面中搁置一个暗藏区域,将所有这些都放在外面。
5、注:include 性能已欠缺,语法是这样审儿滴:<include src=”filename.html”></include>,阐明文档正在整顿当中,后续将放出。
语法 3
.nl-className- 筛选器
.nl-[class1_class2_class3]- 筛选器
实例 3
<ul class="test nl-[uc-bg-f00]-odd nl-[uc-bg-00f]-even">
<li> 子 </li>
<li> 级 </li>
<li> 管 </li>
<li> 控 </li>
</ul>
<i class="nl-[ac white inline us-w,h,lh-50 us-fs-23 us-mr-10]-test !hidden"></i>
运行成果 3
具体解释 3
1、解释就不解释了,放一个表格自行领会吧。
我的项目 | 形容 |
---|---|
nl | 申明子级管制指令 |
className[款式集] | className:个别状况下,给子级元素增加一个款式名称间接写 className 即可,如果赋多个款式,最好应用方括号 [] 框起来。 [款式集]:须要阐明的是,方括号 [] 两头的款式集,两个款式之间的空格,最好用下划线“_”代替;短横线“-”在必要的状况下,能够应用竖线“|”代替。因为,咱们的目标是给其它元素增加款式,而不是将这些款式作用于本身,如:nl-[b red ac]-tag,因为应用了空格,两头的 red 款式就会对以后元素失效。 |
dom | 可选项 dom 为空,款式集间接作用于以后对象的子元素。 dom 不为空,dom 代表指标对象名称,款式集作用于 dom 对象的子级。 |
筛选器 | 可选项 odd:以后对象奇数子元素。 even:偶数子元素。 number:第一个子元素 1,第二个 2,以此类推。 3n:每 3 个元素距离。 3n+2:从第 2 个子元素开始,每 3 个元素距离。 |
.clear | 在子级元素中增加 clear 类,能够革除 nl- 指令的成果。 |