html - 如何通过 CSS 更改 nvd3 图表填充和描边颜色

Question

我正在尝试通过 SugarCRM 中的 CSS 调整 nvd3 图表的颜色。饼图颜色的声明与其他 nvd3 图表略有不同，因此我一直在研究如何通过 CSS 更改它们。下面是带有工作 CSS 的 nvd3 条形图的 html 片段。然后是 nvd3 饼图的 html 片段。

条形图 html:

<g class="nv-group nv-series-0" fill="#1f77b4" stroke="#1f77b4" style="stroke-opacity: 1; fill-opacity: 1;">

调整条形图颜色的CSS:

         .nv-group.nv-series-0 {
            fill: #2A6EBB;
            stroke: #2A6EBB;
        }

饼图 html:

< g class="nv-slice nv-series-0">
<path d="M1.055492460015125e-14,-172.375A172.375,172.375 0 1,1 -97.2397105173445,142.32912324434182L0,0Z" style="fill: rgb(31, 119, 180); stroke: rgb(255, 255, 255); stroke-width: 3px; stroke-opacity: 1;">

饼图的颜色在路径标记的样式属性内声明，因此我不确定如何通过 CSS 更改它们。任何帮助将不胜感激!

Answer 1

<g stroke="#98df8a" fill="#98df8a" class="nv-slice">

在nvd3网站上查了一下，color(fill)是g元素。

无论如何 这是你的 html 的 CSS

g.nv-slice > path{
    fill: #2A6EBB;
    stroke: #2A6EBB;
}

如果要选择第n个元素

g.nv-slice:nth-child(n) > path{
    fill: #2A6EBB;
    stroke: #2A6EBB;
}