带有 Dashing 和 Rickshaw 的 CSS 选择器答案

【问题标题】：CSS selectors with Dashing and Rickshaw带有 Dashing 和 Rickshaw 的 CSS 选择器
【发布时间】：2015-01-27 18:17:37
【问题描述】：

所以我使用单个“Rickshaw”小部件在Dashing 上运行了许多不同的图表。我想使用 CSS 选择器来定义 x 轴视图。我目前是这样设置的...

它的dashboard.erb：

<li data-row="1" data-col="1" data-sizex="6" data-sizey="6">
  <div id="weekly" data-id="etvvrb" data-view="Rickshawgraph" data-title="Weekly ETV reach" data-moreinfo="Week commencing" data-color-scheme="rainbow" data-renderer="line" data-x-axis="weekly"></div>
</li>

这为 CSS 中选择器的名称定义了一个 DIV ID，在我们的 CSS 中......

  .x_tick {
    position: absolute;
    bottom: 0;
    fill: $tick-color;

    .title {
      font-size: 20px;
      color: $tick-color;
      opacity: 0.5;
      padding-bottom: 3px;
    }
  }

  #weekly.x_tick  {   
    position: absolute;
    bottom: 0;
    fill: $tick-color;

      .title {
      font-size: 9px;
      color: $tick-color;
      opacity: 0.5;
      padding-bottom: 3px;
      writing-mode:tb-rl;
      -webkit-transform:rotate(90deg);
      -moz-transform:rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform:rotate(90deg);
      white-space:nowrap;
      display:block;
      bottom:0;
      width:0.5px;
      height:20px;
    }
  }

基本上我会假设它会读取 ID 并为该 ID 使用不同的 CSS，但它似乎完全忽略了它。我有一种感觉，ID 根本没有像我预期的那样被传递，我不确定为什么。

如果有人在这方面有任何背景，尤其是在使用 Dashing 方面，任何建议都将不胜感激。

【问题讨论】：

如果 Sass 不是问题，那么只提供编译后的 CSS。

标签： css rickshaw dashing

【解决方案1】：

我想通了。

Dashing 将生成一个基于 data-id 和 data-view 标签的类对象（可能通过 JS，但我可能错了）。

这会看起来像 widget-data-view.data-id。

这意味着您可以使用 JS 生成的元素在您的 CSS 文档中创建一个新类。就我而言，这看起来像：

   .widget-rickshawgraph {
       /* CSS stuff */
    }

   .widget-rickshawgraph.DATA-ID {
        .x_tick > .title {
      /* CSS overwrite */
   }

希望这是有道理的。谢谢:)

【讨论】：