目標(biāo):成功地將一個(gè)變量作為參數(shù)傳遞給n-child。在下面的例子中，第三行應(yīng)該變成綠色。

問(wèn)題:目前該參數(shù)作為變量被忽略。

問(wèn):這可能嗎？如果是，我要改變什么？

示例代碼:

:root {
  --n: 3;
}
div p:nth-child(var(--n)) {
  background: green;
  padding: 10px;
}

<div>
  <p>a</p>
  <p>b</p>
  <p>c</p>
</div>

唯一可以使用CSS自定義屬性(不是& quot變量& quot！)在聲明中，位于:。這也意味著，不幸的是，您不能在選擇器或媒體查詢中使用這些自定義屬性。

這也是人們不應(yīng)該再稱它們?yōu)镃SS & quot變量& quot。

但是，您可以使用Javascript操作樣式:

const dynamicStyles = document.getElementById('dynamicStyles');

const n = getComputedStyle(document.documentElement).getPropertyValue('--n');

dynamicStyles.textContent = `
div p:nth-child(${n}) {
  background: green;
  padding: 10px;
}
`;

:root {
  --n: 3;
}

<style id="dynamicStyles"></style>
<div>
  <p>a</p>
  <p>b</p>
  <p>c</p>
</div>

使用純CSS無(wú)法做到這一點(diǎn)，但是可以嘗試編寫(xiě)一個(gè)JS函數(shù)來(lái)實(shí)現(xiàn)。

該功能:

getComputedStyle(document.documentElement)
    .getPropertyValue('--n');

將獲得您在:root{}中描述的“3”

現(xiàn)在，因?yàn)槟悴荒馨裫s放在你的css中，你必須在你的HTML文件中做所有這些。所以你的工作就是用html風(fēng)格的標(biāo)簽來(lái)包裝你用這個(gè)函數(shù)得到的變量:

<script>
  document.getElementById('custom-container'); //Select the div container

  node.innerHTML('<style> #custom-container p:nth-child('); //Wrap style around the variable

  getComputedStyle(document.documentElement)
    .getPropertyValue('--n'); //get your variable, in this case '3'

  node.innerHTML('){background: green;padding: 10px;}</style>'); // Close the wrapping and define the style
</script>

<div id="custom-container"> <!-- Mark your div container with and ID -->
  <p>a</p>
  <p>b</p>
  <p>c</p>
</div>