网格系统不显示文档中的颜色答案

【问题标题】：Grid System doesn't shows color as in documentation网格系统不显示文档中的颜色
【发布时间】：2016-01-20 08:22:07
【问题描述】：

我刚开始使用angular-material。我在我的示例中尝试了grid 元素，我正在测试 flex 属性。在示例中，这为每个 flex 元素显示了三种不同的颜色，但在 codepen 中，我没有得到这些颜色。

这是我的代码：

HTML：

<html lang="en" ng-app="StarterApp">
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <meta name="viewport" content="initial-scale=1" />
  </head>
  <body layout="column" ng-controller="AppCtrl">
    <md-toolbar layout="row">
      <div class="md-toolbar-tools">
        <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
          <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
        </md-button>
        <h1>Hello World</h1>
      </div>
    </md-toolbar>
<div layout="row">
  <div flex>
    [flex]
  </div>
  <div flex>
    [flex]
  </div>
  <div flex hide-sm>
    [flex]
  </div>
</div>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
  </body>
</html>

JS：

var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  };

}]);

请帮忙。

【问题讨论】：

标签： javascript css angularjs flexbox angular-material

【解决方案1】：

示例中不包含 css。颜色用于表示网格大小之间的差异。您可以使用 CSS3 第 n 个子选择器为它们着色。你可以在这里找到文档：http://www.w3schools.com/cssref/sel_nth-child.asp

作为您的代码示例，您可以拥有

#parentDivId div:nth-child(1) {
    background: red;
}
#parentDivId div:nth-child(2) {
    background: blue;
}
#parentDivId div:nth-child(3) {
    background: yellow;
}

如此等等。将 parentDivId 重命名为父 DIV 的 ID。

演示：http://codepen.io/anon/pen/epyQVN

【讨论】：

好吧，我很困惑，因为这些 CSS 没有包含在 angular-documentation 中。谢谢。