当前位置: 首页 > Web前端 > HTML

Yus框架的nl子级控制命令

时间:2023-03-28 14:16:31 HTML

语法1.nl-className.nl-[class1_class2_class3]示例1

  • 级别
  • 管理
  • 控制
  • RunEffect1详解11.nl-class1nl-class2,即给子元素添加class1class2样式。2、nl-[class1class2class3],当需要一次性添加多个样式时,可以用方括号将它们包裹起来;另外,如果需要像us-h-50uc-c-f00这样的yus样式应用到子元素上,也需要用方括号括起来。3.nl-[class1_class2_class3],上一篇中class2前后有空格,会被浏览器判断为样式,作用于child的同时会影响parent。如果只想影响子元素,可以用下划线代替空格来解决问题。语法2.nl-className-dom.nl-[class1_class2_class3]-dom实例2
  • child
  • level
  • management
  • 控制
  • 运行效果2详解21.效果同例1,但是代码更加简洁。作为一些虚伪的提倡者,不要在html页面中写太多风格的css代码,不好看。2、使用nl-[class1class2class3]-dom命令,可以把复杂的代码放到页面底部,这样在上面可以看到类名,在下面找到类对应的样式,哪个更容易阅读和理解;当然大部分编辑器或者脚手架都可以在按住ctrl键点击样式名的时候直接定位到对应的css文件,其实还是挺方便的。3.当然我们也可以使用yus框架的《include指令》将这些样式include到另一个页面中,但是需要注意的是yus的include命令是异步的,所以如果有相关的js代码,应该也被包含页面以避免错误。4.代码中隐藏的是yus《内置样式》,前面有个感叹号,表示强制模式。这些都放在里面。5、注意:改进了include功能,语法如下:,表示文档正在整理中,稍后发布。语法3.nl-className-filter.nl-[class1_class2_class3]-filterinstance3
  • 级别
  • 管理
  • 控制
  • 运行效果3详解31.解释我就不多说了,放个表格大家自己体会吧。项目说明nl声明子级控制指令className[styleset]className:一般给子元素加上样式名,直接写className。如果分配多个样式,最好使用方括号[]将它们框起来。[样式集]:需要注意的是,方括号[]之间的样式集,两个样式之间的空格,最好用下划线“_”代替;如有必要,可以使用破折号“-”竖线“|”反而。因为我们的目的是给其他元素添加样式,而不是把这些样式应用到自己身上,比如:nl-[bredac]-tag,因为使用了空格,所以中间的红色样式会在当前元素。dom选项dom为空,样式集直接作用于当前对象的子元素。dom不为空,dom代表目标对象的名称,样式集作用于dom对象的children。过滤器选项odd:当前对象的奇数个子元素。even:偶数子元素。number:第一个子元素为1,第二个为2,以此类推。3n:间隔每3个元素。3n+2:从第二个子元素开始,每3个元素分开。.clear给子元素添加clear类,清除nl-指令的效果。