Question

<><>Goal: 成功地将变量作为参数传给婴儿。在下文中,第三行应转而绿化。

<<>Problem>: 目前,参数被忽略为一个变量。

Question: Is this possible at all? If yes, what do I have to change?

www.un.org/Depts/DGACM/index_spanish.htm 例:

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

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

Answer 1

可在<条码>后在<<上公布<>/>。这也意味着,不幸的是,你无法在选择者或媒体查询中使用这些习俗。

That is also the reason why people really should stop calling them CSS "variables".

You can, however, manipulate styles using 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>

Answer 2

理解为什么在特别安全局无法做到这一点,考虑这个例子。第三个要素的颜色是什么?

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

:root {
  --n: 3;
}
p {
  background: cyan;
}
p:nth-child(var(--n)) {
  background: green;
  :root:has(&) {
    --n: 1;
  }
}

If --n evaluates to 3 then the third p element color is green and --n evaluates to 1. Which means that the third p element color is cyan and --n evaluates to 3. And repeat.

Answer 3

你可以用纯粹的中央安全局来这样做,但你可以试图撰写一份联合文件,以便这样做。

这一职能:

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

页: 1

现在,既然你可以把 j放在你身上,你就必须在你的超文本档案中这样做。因此,你的工作是围绕你履行这一职责的变量总结一个html式标签:

<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>

友情链接