语法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指令说明
项目 |
描述 |
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-指令的效果。 |