使用Angular和Materialize实现的CSS3 :nth-child选择器用法在线测试

:nth-child(test) built with AngularJs and Materialize 可以帮助学习或在线演示css3 子元素选择器的实际作用范围。

angular, tool, css3, selector

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2180
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div ng-app="nthChildTest" class="blue-grey lighten-5">
  <div ng-controller="MainCtrl" class="container">
    <div class="row">
      <div class="col s12">
        <h1>:nth-child(test)  <a class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="This is a small tool built with AngularJs and Materialize. Just type your nth-child() expression to test against nth-child(expression) behavior. Hope it helps."><i class="material-icons">info_outline</i></a></h1>
      </div>
    </div>
    <div class="row">
      <div class="col s4 input-field">
        <label>
    nth-child(expression) 
  </label>
        <input ng-model="expression" type="text" />
      </div>
      <div class="col s4 input-field">
        <label>n. of items</label>
        <input ng-model="items" type="number" min="1" />
      </div>
      <div class="col s4 input-field">
        <label>columns</label>
        <input ng-model="columns" type="number" min="1" max="50" />
      </div>
    </div>
    <div class="row">
      <div class="col s12">
        <style>
          li { 
            width: {{(100/columns)-1}}%; 
          } 
          li:nth-child({{expression}}) { 
            background-color: #455a64!important; 
            color: #fff!important;
            opacity:.8;
            -webkit-box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
               -moz-box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
                -ms-box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
                 -o-box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
                    box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
            -webkit-transform: translateY(-5%) scale(1.5);
               -moz-transform: translateY(-5%) scale(1.5);
                -ms-transform: translateY(-5%) scale(1.5);
                 -o-transform: translateY(-5%) scale(1.5);
                    transform: translateY(-5%) scale(1.5);            
          } 
          li:nth-child({{columns}}n+{{columns}}) { 
            margin-right: 0; 
            width: {{(100/columns)}}%; 
          } 
          li:nth-child({{columns}}n+1) { 
            clear: left; 
          } 
        </style>
        <ul>
          <li class="z-depth-1" ng-repeat="i in gn(items) track by $index"><span>item {{$index+1}}</span></li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col s6">
        built with <a href="https://angularjs.org/" target="_blank">AngularJs v1.5.5</a> and <a href="https://materializecss.com/" target="_blank">Materialize v0.97.6</a>
      </div>
      <div class="col s6 right-align">
        :nth-child(test) v.1.0 | created by <a href="#" target="_blank">Federico Portoghese</a>
      </div>
    </div>
  </div>
</div>

:nth-child(test) built with AngularJs and Materialize 可以帮助学习或在线演示css3 子元素选择器的实际作用范围。

angular, tool, css3, selector

编辑器支持Emmet

快捷键

:nth-child(test) built with AngularJs and Materialize 可以帮助学习或在线演示css3 子元素选择器的实际作用范围。

angular, tool, css3, selector

使用Angular.js实现自定义的Addthis社交分享插件界面和指令

使用CSS3 clip-path实现的标题文本水纹波动动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：