css - rect 如何影响 css nth-child？

Question

我使用 D3 创建了一个 SVG。我现在尝试使用 nth-child css 选择器以不同的方式设置它的样式。

.strat {
    width: 300px;
    margin: 0 auto;
}

.strat .bar-circles:nth-child(1n+0) circle {
    fill: #00688d;
}

.strat .bar-circles:nth-child(2n+0) circle {
    fill: #00a4a5;
}

.strat .bar-circles:nth-child(3n+0) circle {
    fill: #f7b454;
}

.strat .css-fix {
    stroke: #f0f;
}

<h5>Broken Nth Child</h5>
<div class="strat"><svg height="380" width="800" fill="#fff"><rect x="0" y="0" height="400" width="800" stroke="#fff" fill="#fff" class="chart-background"></rect><text x="140" y="100" font-size="10px" fill="#999" text-anchor="end">0</text><text x="660" y="100" font-size="10px" fill="#999" text-anchor="start">89%</text><circle r="2" cx="150" cy="97" opacity="1" fill="#999"></circle><line x1="150" x2="650" y1="97" y2="97" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"></line><circle r="2" cx="650" cy="97" opacity="1" fill="#999"></circle><g class="bar-circles"><circle r="30" cx="240.34792368125704" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="262.7946127946128" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="273.4567901234568" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="253.8159371492705" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="262.7946127946128" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="256.06060606060606" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="266.16161616161617" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="257.74410774410774" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="264.4781144781145" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle></g><rect x="259.73936899862827" y="65" height="70" width="2" stroke-width="4" stroke="transparent" fill="#000" data-plugin="tooltip" data-title="Avg Read Rate<br />20%"></rect><text x="140" y="220" font-size="10px" fill="#999" text-anchor="end">0</text><text x="660" y="220" font-size="10px" fill="#999" text-anchor="start">89%</text><circle r="2" cx="150" cy="217" opacity="1" fill="#999"></circle><line x1="150" x2="650" y1="217" y2="217" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"></line><circle r="2" cx="650" cy="217" opacity="1" fill="#999"></circle><g class="bar-circles"></g><text x="140" y="340" font-size="10px" fill="#999" text-anchor="end">0</text><text x="660" y="340" font-size="10px" fill="#999" text-anchor="start">89%</text><circle r="2" cx="150" cy="337" opacity="1" fill="#999"></circle><line x1="150" x2="650" y1="337" y2="337" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"></line><circle r="2" cx="650" cy="337" opacity="1" fill="#999"></circle><g class="bar-circles"><circle r="30" cx="210.60606060606062" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="223.51290684624018" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="229.12457912457913" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="228.00224466891135" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="232.4915824915825" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="229.68574635241305" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="219.02356902356902" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="225.75757575757575" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="230.2469135802469" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="210.04489337822673" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="223.51290684624018" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle></g><rect x="223.8189980614223" y="305" height="70" width="2" stroke-width="4" stroke="transparent" fill="#000" data-plugin="tooltip" data-title="Avg Read Rate<br />13%" data-original-title="" title="" data-has-tip="true"></rect></svg></div>


<h5>Working Nth Child</h5>
<div class="strat"><svg height="380" width="800" fill="#fff"><rect x="0" y="0" height="400" width="800" stroke="#fff" fill="#fff" class="chart-background"></rect><text x="140" y="100" font-size="10px" fill="#999" text-anchor="end">0</text><text x="660" y="100" font-size="10px" fill="#999" text-anchor="start">89%</text><circle r="2" cx="150" cy="97" opacity="1" fill="#999"></circle><line x1="150" x2="650" y1="97" y2="97" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"></line><circle r="2" cx="650" cy="97" opacity="1" fill="#999"></circle><g class="bar-circles"><circle r="30" cx="240.34792368125704" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="262.7946127946128" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="273.4567901234568" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="253.8159371492705" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="262.7946127946128" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="256.06060606060606" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="266.16161616161617" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="257.74410774410774" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="264.4781144781145" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle></g><rect x="259.73936899862827" y="65" height="70" width="2" stroke-width="4" stroke="transparent" fill="#000" data-plugin="tooltip" data-title="Avg Read Rate<br />20%"></rect><text x="140" y="220" font-size="10px" fill="#999" text-anchor="end">0</text><text x="660" y="220" font-size="10px" fill="#999" text-anchor="start">89%</text><circle r="2" cx="150" cy="217" opacity="1" fill="#999"></circle><line x1="150" x2="650" y1="217" y2="217" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"></line><circle r="2" cx="650" cy="217" opacity="1" fill="#999"></circle><g class="bar-circles"></g><rect x="200" y="185" height="70" width="2" class="css-fix"></rect><text x="140" y="340" font-size="10px" fill="#999" text-anchor="end">0</text><text x="660" y="340" font-size="10px" fill="#999" text-anchor="start">89%</text><circle r="2" cx="150" cy="337" opacity="1" fill="#999"></circle><line x1="150" x2="650" y1="337" y2="337" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"></line><circle r="2" cx="650" cy="337" opacity="1" fill="#999"></circle><g class="bar-circles"><circle r="30" cx="210.60606060606062" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="223.51290684624018" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="229.12457912457913" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="228.00224466891135" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="232.4915824915825" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="229.68574635241305" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="219.02356902356902" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="225.75757575757575" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="230.2469135802469" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="210.04489337822673" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="223.51290684624018" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle></g><rect x="223.8189980614223" y="305" height="70" width="2" stroke-width="4" stroke="transparent" fill="#000" data-plugin="tooltip" data-title="Avg Read Rate<br />13%" data-original-title="" title="" data-has-tip="true"></rect></svg></div>

在我的例子中，第二行缺少数据(并且会有绿色圆圈)，最后一行应该是黄色圆圈。

包含 rect .css-fix(以粉红色突出显示)修复了 css nth-child 选择器(并且正确地将最后一行圆圈更改为黄色)，但为什么呢？

我尝试了很多东西。我在中间行(在 .bar-circles 元素内)创建了一个空圆，因为我知道 g 元素是一个非定位元素。我还尝试了 g 中的其他元素，但我不明白为什么使用 rect 元素可以解决这个问题。

Answer 1

您不能以任何方式限制 :nth-child，既不能限制为特定的元素类型(-> 类型选择器)，也不能限制为具有特定 的元素class(-> 类选择器，如您的示例所示)，也不是属性(-> 属性选择器)。

实际上所有它能为您做的就是问这个问题:

“我是我父元素的第n个 child 吗？”

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child