CSS 个带有 Dashing 和 Rickshaw 的选择器

Question

所以我在 Dashing using a single 'Rickshaw' 小部件上有许多不同的图表运行。我想使用 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 方面，任何建议将不胜感激。

Answer 1

我想通了。

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

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

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

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

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

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

CSS 个带有 Dashing 和 Rickshaw 的选择器

CSS selectors with Dashing and Rickshaw

css

rickshaw

dashing