【问题标题】：How does a rect affect css nth-child?rect 如何影响 css nth-child？
【发布时间】：2015-12-16 02:43:09
【问题描述】：

我使用 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 选择器（并且 correclty 将最后一行圆圈更改为黄色），但为什么呢？

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

【问题讨论】：

标签： css d3.js svg

【解决方案1】：

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

真的所有它可以为你做的是问这个问题：

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

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

【讨论】：

是的，对于这个用例，有 :nth-of-type() w3schools.com/cssref/sel_nth-of-type.asp