[运行代码片段]
我希望我的 DIV 编号显示从0 ,
所以我想使用以下命令从 -1 开始计数器：counter-reset : square -1;
然而，在使用时此设置将被忽略:host
counter-reset当所有 DIV 都包含在额外的父 DIV 中时（使用counter-reset在该父 DIV 上）
但是我更喜欢not使用这个解决方法因为它在我的最终应用程序中需要更多代码。
是否可以使用counter-reset in :host ???
window.customElements.define('game-toes', class extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'})
.appendChild(document.querySelector('#Styles').content.cloneNode(true));
}
});
<TEMPLATE id="Styles">
<STYLE>
:host {
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
grid-gap: .5em;
counter-reset: squarenr -1; /* does not reset to -1 */
}
DIV {
font-size:3em;
display:flex;
justify-content:center;
background:lightgrey;
counter-increment: squarenr;
}
#_::before {
background:lightgreen;
content: counter(squarenr);
}
#X::after,
#O::after {
content: attr(id);
}
</STYLE>
<DIV id=_></DIV><DIV id=_></DIV><DIV id=X></DIV>
<DIV id=_></DIV><DIV id=X></DIV><DIV id=_></DIV>
<DIV id=O></DIV><DIV id=O></DIV><DIV id=X></DIV>
</TEMPLATE>
<game-toes></game-toes>
qomponents
:host是一个伪类，它选择影子宿主元素（即：托管 Shadow DOM 的 HTML 元素），而不是影子根。
结果，一个counter-reset会影响主 DOM 树中的计数器，而不是 Shadow DOM 中的计数器（参见下面的示例）。
如果你想在 Shadow DOM 根中设置 CSS 计数器，你可以使用:first-of-type选择器：
div:first-of-type {
counter-reset: squarenr -1
}
window.customElements.define('game-toes', class extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'closed'})
.appendChild(document.querySelector('#Styles').content.cloneNode(true));
}
});
div::after {
counter-increment: squarenr ;
content: counter( squarenr ) ;
}
<TEMPLATE id="Styles">
<STYLE>
:host {
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
grid-gap: .5em;
counter-reset: squarenr -1;
}
:host > div:first-of-type {
counter-reset: squarenr -1;
color: red;
}
DIV {
font-size:2em;
display:flex;
justify-content:center;
background:lightgrey;
counter-increment: squarenr ;
}
#_::before {
background:lightgreen;
content: counter(squarenr);
}
#X::after,
#O::after {
content: attr(id);
}
</STYLE>
<DIV id=_></DIV><DIV id=_></DIV><DIV id=X></DIV>
<DIV id=_></DIV><DIV id=X></DIV><DIV id=_></DIV>
<DIV id=O></DIV><DIV id=O></DIV><DIV id=X></DIV>
</TEMPLATE>
<div>squarenr=</div><game-toes></game-toes><div>squarenr=</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
