CSS - 相当于“nth-child”的“start”，当start不是1

Question

如果某个人的列表中包含一系列从0开始的问题，是否可以根据受影响的值应用css？例如，如果列表是这样的......

<b>How do you feel?</b>
<ol start="0">
    <li>Great</li>
    <li>Good</li>
    <li>Fine</li>
    <li>I do not understand the question</li>
</ol>

....这个伪代码有效吗？

ol li {
    color: rgb (180, 180, 180);
}

ol li:value-of-child(2) {
    color: rgb (0, 0, 0);
}

这样会以这种方式出现：

我试过使用以下内容，但它没有用。

ol li {
    color: rgb (180, 180, 180);
}

ol li:nth-child(calc(my_value - 1)) {
    color: rgb (0, 0, 0); 
}

用户在单独的文本字段中选择后，由完全不同的应用程序插入

my_value，我无法使用JavaScript来解决此问题。 （我知道这会引起很多问题 - 相信我，理想情况下，我绝不会这样做，但不幸的是，我对我正在使用的文件类型的控制非常有限。） < / p>

更新：我本来希望不要试图深入了解为什么我受到如此限制，但似乎人们将其视为XY问题，而事实并非如此案件。

我正在使用不在前端使用weblang内容的应用，但它生成使用WebKit显示的文档。它的输出可能会受到html / css - 的影响，但不能在任何阶段使用JavaScript ，因为如果文档被视为纯文本，则该文档必须是人类可读的。此外，我的雇主并不热衷于建立允许JS渗透我们的常规做法的先例 - 这里的大部分员工都接受过使用我们的应用程序而不是JavaScript的培训 - 所以即使它不是一个有效的问题，它仍然会作为维持我的工作的问题，我将被禁止。 ：）

如上所示的实际列表与用户的输入方法是分开的。 （我们使用的列表具有字符限制;因此，根据需要，选择长于“某个上限”的选项会被截断，因此大多数实际条目都不适合。）因此，在显示的每个列表下方，有一个弹出菜单提供编号为0-3的选项。用户的选择将出现在叙述中，多次我喜欢，这就是为什么我可以尝试使用该值来影响CSS，而不是像{{1选择器。

在这个实例中，列表编号从0开始，因为编写测试的人决定从0到3的分数。所以我不能只是将所有内容都提升到1个单位;这不是我修改的材料，只是重现。

我可以做什么会影响在文档上生成的HTML的类型（同样，不要改变交互式方面的元素/小部件，只需< em>叙述方面）并使用CSS来影响输出。因此，至少，当文档被视为预期时，可以显示答案，同时也会显示他们实际选择的答案，而不是有一个非常冗余的文档，而不是...

这真棒吗？

    
1. 是
    
2. 没有
    
3. 也许
    
4. Eli Whitney
答案：3

好的，这是怎么回事？

    
1. 有点儿
    
2. 有点不
    
3. 从不
    
4. Supernever
答案：2

......等等。

细心的读者可能会阻止我 - 因为如果由于纯文本因素而不允许使用JavaScript，为什么还要烦扰CSS呢？你没有错，这不会影响文档的纯文本版本，但是“尽我所能”尝试使叙述显示在应用程序中查看时更容易阅读，或者当打印成PDF。

我真的有一些相当有限的东西，我可以直接影响它，因为它与生成的文档有关，所以我希望有一种方法，至少使叙述输出更清洁。

Answer 1

这可能是您可以使用的吗？

修改

下面的示例显示了您可能使用的可能逻辑。为了让我更具体，我需要看到你可以渲染的HTML代码，以便更好地了解是否有其他解决方案。

ol > li {
  color: #BBB;
}
.qiz {
  position: relative;
  padding-bottom: 20px;    /* make space for the answer */
}                               
.qiz > div[data-value] {
  position: absolute;      /* put answer at bottom, visiually, but it has to be */
  bottom: 0;               /* before in DOM as there is no "parent" selector  */
}

/* qiz nr1, qiz nr2 */
.qiz > div[data-value="1"] ~ ol > li:nth-child(1)  {
  color: #000;
}
.qiz > div[data-value="2"] ~ ol > li:nth-child(2)  {
  color: #000;
}
.qiz > div[data-value="3"] ~ ol > li:nth-child(3)  {
  color: #000;
}
.qiz > div[data-value="4"] ~ ol > li:nth-child(4)  {
  color: #000;
}

/* qiz nr3 */
.qiz > div[data-value="5"] ~ ol > li:nth-child(1)  {
  color: #000;
}
.qiz > div[data-value="6"] ~ ol > li:nth-child(2)  {
  color: #000;
}
.qiz > div[data-value="7"] ~ ol > li:nth-child(3)  {
  color: #000;
}
.qiz > div[data-value="8"] ~ ol > li:nth-child(4)  {
  color: #000;
}

/* qiz nr4 - using normal flow and data-value is set on the ol tag */
.qiz > ol[data-value="1"] > li:nth-child(1) {
  color: #000;
}

<div class="qiz nr1">
  Is This Awesome?
  <div data-value="3">Answer: 3</div>
  <ol start="0">
    <li>Yes</li>
    <li>No</li>
    <li>Maybe</li>
    <li>Eli Whitney</li>
  </ol>
</div>

<hr />

<div class="qiz nr2">
  Okay, What About This?
  <div data-value="2">Answer: 2</div>
  <ol start="5">
    <li>Kinda</li>
    <li>Kinda Not</li>
    <li>Never</li>
    <li>Supernever</li>
  </ol>
</div>

<hr />

<div class="qiz nr3">
  If you need it like this?
  <div data-value="8">Answer: 8</div>
  <ol start="5">
    <li>Dont Know</li>
    <li>Hopefully Not</li>
    <li>Maybe ...</li>
    <li>Doh, YES</li>
  </ol>
</div>

<hr />

<div class="qiz nr4">
  Using normal element flow?
  <ol start="0" data-value="1">
    <li>This is selected</li>
    <li>But this not</li>
    <li>Neither this</li>
    <li>Not the last either</li>
  </ol>
  <div>Answer: 1</div>
</div>

Answer 2

有点令人费解的是，我找到了答案，但需要注意的是，只有当你知道列表中有多少项目时它才有用。在此示例中，有6个项目（0到5），因此您将编写6n-my_value，如果my_value为2，平台将转换为6n-2。

这可能意味着你必须为不同的OL拥有不同的CSS。

ol > li {
  color: #BBB;
}
ol > li:nth-last-child(6n-2) { /* or in your stylesheet: 6n-my_value */
  color: #000;
}

<ol start="0">
  <li>Great</li>
  <li>Good</li>
  <li>Fine</li>
  <li>Bad</li>
  <li>None of your business</li>
  <li>I do not understand the question</li>
</ol>