有没有办法在 :nth-child(n) 中使用 "n" 值?
Is there a way to use the "n" value in :nth-child(n)?
我想创建折叠效果。
有4张蓝卡,所以我创建了4张类来设置位置。我想让它更聪明,以防超过 4 张卡片。在CSS,我试过这个。
.card:nth-child(n){
position: absolute;
left: calc(n*10)px;
top: calc(n*10)px;
}
但是,它不起作用。有办法吗?
不太清楚要用它做什么,但你可以通过嵌套 div 来达到同样的效果
.card {
position:absolute;
background-color: rgba(0,0,255,0.5);
border:1px solid red;
width:40px;
height:60px;
}
.card > .card {
position:absolute;
left:10px;
top:10px;
}
<div class="holder">
<div class="card card1" >
<div class="card card2">
<div class="card card3" >
<div class="card card4" >
</div>
</div>
</div>
</div>
</div>
CSS 不支持变量。您可以使用 Less/SASS 循环并将其定义为 n 直到某个值,但这会多次输出几乎相同的 CSS 。这是 Codepen 示例。
SCSS代码最多支持10张卡片:
$n: 10;
@for $i from 1 through $n {
.card:nth-child(#{$i}) {
position: absolute;
left: 10px * $i;
top: 10px * $i;
}
}
但是你确定你的做法是正确的吗?也许您想退后一步,寻找不同的方法。因为这仍然不能动态缩放,所以您必须预测或限制 n 为某个值。如果您要选择大的 n,它会导致一个大的 CSS 文件,这等于更长的加载时间。
尝试使用此方法 JavaScript
var cards = document.getElementsByClassName('card');
for(i = 0; i < cards.length; i++) {
cards[i].style.position = 'absolute';
cards[i].style.left = String(i * 10) + 'px';
cards[i].style.top = String(i * 10) + 'px';
}
.card{
opacity:0.5;
float:left;
position:absolute;
background-color:blue;
border:1px solid red;
width:40px;
height:60px;
}
<div class="holder">
<div class="card card1" ></div>
<div class="card card2" ></div>
<div class="card card3" ></div>
<div class="card card4" ></div>
</div>
要在 CSS 中保留计算,您可以使用 CSS 个变量:calc( var(--n) * 10px );
。您仍然需要通过 JS 或通过在 HTML 中预定义它来手动定义 --n
,但这种方式感觉更具声明性,因为没有实际的样式使其成为 JS 代码:
function add() {
var parent = document.querySelector('.container');
var child = document.createElement('div');
child.classList.add('child');
child.style.setProperty('--n', parent.children.length);
parent.appendChild(child);
}
.child {
position: absolute;
left: calc( var(--n) * 30px + 100px );
top: calc( var(--n) * 30px );
background-color: red;
width: 30px;
height: 30px;
}
<button onclick="add()">Add more</button>
<div class="container">
<div class="child" style="--n: 0;"></div>
<div class="child" style="--n: 1;"></div>
<div class="child" style="--n: 2;"></div>
</div>
浏览器 support 相当不错:现在每个主流浏览器都有它。
您可以尝试使用 CSS 自定义属性和一个小片段:
:root {
--index: 0;
}
*:nth-child(1) {
--index: 0;
}
*:nth-child(2) {
--index: 1;
}
*:nth-child(3) {
--index: 2;
}
您声明一次,您可能希望拥有 children 的数量,然后像那样使用:
.child {
position: absolute;
top: calc(100px * var(--index));
}
CSS 变量可以设置为 HTML 和 JavaScript:
<style>
.card:nth-child(n){
position: absolute;
left: calc(var(--index)*10px);
top: calc(var(--index)*10px);
}
</style>
<div class="card" style="--index: 0"></div>
<div class="card" style="--index: 1"></div>
更新 根据@Kenneth 建议
将 px 移入计算中
我想创建折叠效果。
有4张蓝卡,所以我创建了4张类来设置位置。我想让它更聪明,以防超过 4 张卡片。在CSS,我试过这个。
.card:nth-child(n){
position: absolute;
left: calc(n*10)px;
top: calc(n*10)px;
}
但是,它不起作用。有办法吗?
不太清楚要用它做什么,但你可以通过嵌套 div 来达到同样的效果
.card {
position:absolute;
background-color: rgba(0,0,255,0.5);
border:1px solid red;
width:40px;
height:60px;
}
.card > .card {
position:absolute;
left:10px;
top:10px;
}
<div class="holder">
<div class="card card1" >
<div class="card card2">
<div class="card card3" >
<div class="card card4" >
</div>
</div>
</div>
</div>
</div>
CSS 不支持变量。您可以使用 Less/SASS 循环并将其定义为 n 直到某个值,但这会多次输出几乎相同的 CSS 。这是 Codepen 示例。
SCSS代码最多支持10张卡片:
$n: 10;
@for $i from 1 through $n {
.card:nth-child(#{$i}) {
position: absolute;
left: 10px * $i;
top: 10px * $i;
}
}
但是你确定你的做法是正确的吗?也许您想退后一步,寻找不同的方法。因为这仍然不能动态缩放,所以您必须预测或限制 n 为某个值。如果您要选择大的 n,它会导致一个大的 CSS 文件,这等于更长的加载时间。
尝试使用此方法 JavaScript
var cards = document.getElementsByClassName('card');
for(i = 0; i < cards.length; i++) {
cards[i].style.position = 'absolute';
cards[i].style.left = String(i * 10) + 'px';
cards[i].style.top = String(i * 10) + 'px';
}
.card{
opacity:0.5;
float:left;
position:absolute;
background-color:blue;
border:1px solid red;
width:40px;
height:60px;
}
<div class="holder">
<div class="card card1" ></div>
<div class="card card2" ></div>
<div class="card card3" ></div>
<div class="card card4" ></div>
</div>
要在 CSS 中保留计算,您可以使用 CSS 个变量:calc( var(--n) * 10px );
。您仍然需要通过 JS 或通过在 HTML 中预定义它来手动定义 --n
,但这种方式感觉更具声明性,因为没有实际的样式使其成为 JS 代码:
function add() {
var parent = document.querySelector('.container');
var child = document.createElement('div');
child.classList.add('child');
child.style.setProperty('--n', parent.children.length);
parent.appendChild(child);
}
.child {
position: absolute;
left: calc( var(--n) * 30px + 100px );
top: calc( var(--n) * 30px );
background-color: red;
width: 30px;
height: 30px;
}
<button onclick="add()">Add more</button>
<div class="container">
<div class="child" style="--n: 0;"></div>
<div class="child" style="--n: 1;"></div>
<div class="child" style="--n: 2;"></div>
</div>
浏览器 support 相当不错:现在每个主流浏览器都有它。
您可以尝试使用 CSS 自定义属性和一个小片段:
:root {
--index: 0;
}
*:nth-child(1) {
--index: 0;
}
*:nth-child(2) {
--index: 1;
}
*:nth-child(3) {
--index: 2;
}
您声明一次,您可能希望拥有 children 的数量,然后像那样使用:
.child {
position: absolute;
top: calc(100px * var(--index));
}
CSS 变量可以设置为 HTML 和 JavaScript:
<style>
.card:nth-child(n){
position: absolute;
left: calc(var(--index)*10px);
top: calc(var(--index)*10px);
}
</style>
<div class="card" style="--index: 0"></div>
<div class="card" style="--index: 1"></div>
更新 根据@Kenneth 建议
将 px 移入计算中