(SCSS - CSS) 每隔一个子元素抓取一次

Question

我有一个供个人使用的 CSS 框架，我希望它尽可能“自动”。我遇到了一个我无法解决的问题，但也许你可以帮助我。

假设我有 3 张卡片，其中一张是最上面的父母，其余的是彼此的孩子。我会表明我的意思。

<div class="card"> // Top parent
  Lorem!
  <div class="card"> // First child
    Lorem!
    <div class="card"> // Second child
      Lorem!
    </div>
  </div>
</div>

我的目标是让父卡的样式与正文相反的背景颜色和第一个孩子再次与正文相同，因此它与父卡相反。第二个孩子再次反对第一个孩子，也就是与顶级父母相同的背景。并让这种情况无限地持续下去。

可以为每个卡片设置背景颜色，但我希望在您将卡片添加到其他卡片中时，而不是手动执行此操作。

我目前正在解决这个问题 .card > .card 但这只能工作一次，我不希望用 .card > .card > .card > .card > .card 等向 css 发送垃圾邮件...

我尝试使用 div:nth-child(even) 但如果你一直在彼此之间做孩子，这将不起作用。

我怎样才能做到这一点？

当前代码：

SCSS：

@if #{$class} == card {
/* If parent card has a child card */
.#{$class} > .#{$class} {
  background-color: var(--clr-light-primary-background);
 }
}

CSS：

.card > .card {
  background-color: var(--clr-light-primary-background);
 }

HTML：

<div class="card column33 sm-rounded">
        <div class="card-header">
            <h2 class="card-title text-regular text-uppercase">TOP PARENT</h2>
        </div>
        <div class="card">
            <div class="card-header">
                <h2 class="card-title text-medium">1st CHILD</h2>
            </div>
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title text-medium">2nd CHILD</h2>
                </div>
            </div>
        </div>
    </div>

Answer 1

目前 CSS (AFAIK) 不提供基于嵌套级别增加 CSS 变量的方法 - 为什么您需要设置允许的有限嵌套级别... 但另一方面，如果您的 DOM 有 20 个嵌套卡片，这是否有意义 ;-)？

这是一个允许 5 个嵌套卡片的示例

body {
  --color-text: #fff;
  --color-back: #272b34;
  --color-back-alt: #323743;
  color: var(--color-text);
  background: var(--color-back);
  padding: 1rem;
}

.card {
  background: var(--color-back-alt);
  padding: 1rem;
}

:not(.card)>.card>.card>.card>.card>.card>.card,
:not(.card)>.card>.card>.card>.card,
:not(.card)>.card>.card {
  background: var(--color-back);
}

Body
<div class="card"> 1
  <div class="card"> 2
    <div class="card"> 3
      <div class="card"> 4
        <div class="card"> 5
          <div class="card"> 6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

想不出用足够动态的 CSS 来做这件事的方法，所以这里有一些 JS。

它从外层卡片开始，然后通过它们交替背景颜色继续向下直到没有更多。

let odd = true;
let cards = document.querySelectorAll('.card');
do {
  cards[0].style.backgroundColor = (odd) ? 'blue' : 'red';
  odd = !odd;
  cards = cards[0].querySelectorAll('.card');
} while (cards.length > 0)

<div class="card column33 sm-rounded">
  <div class="card-header">
    <h2 class="card-title text-regular text-uppercase">TOP PARENT</h2>
  </div>
  <div class="card">
    <div class="card-header">
      <h2 class="card-title text-medium">1st CHILD</h2>
    </div>
    <div class="card">
      <div class="card-header">
        <h2 class="card-title text-medium">2nd CHILD</h2>
      </div>
    </div>
  </div>
</div>

Answer 3

CSS 解决方案

这对于 CSS 框架可能不实用，但您可以尝试使用 CSS 过滤器，看看是否可以得到有效的颜色组合。

注意这里的 JS 只是为了演示。

document.querySelector("button").addEventListener("click", () => {
  const cards = document.querySelectorAll(".card");
  const lastCard = cards[cards.length - 1];

  lastCard.innerHTML = `${cards.length} <div class="card">${
    cards.length + 1
  }</div>`;
});

document.querySelector("input").addEventListener("input", (e) => {
  const newColor = e.target.value;

  document.documentElement.style.setProperty("--card-bg-color", newColor);
});

:root {
  --card-bg-color: #666;
}

.card {
  padding: .5rem;
  border-radius: 0.25em;
  background: var(--card-bg-color);
  >
}

.card>.card {
  filter: invert(100%);
}


/* Demo */
.control {
  position: fixed;
  bottom: 0;
  left: 0;
  display: grid;
  grid-gap: .5rem;
  background: black;
  color: white;
  padding: 1rem;
}

<div class="card">1
  <div class="card">2
    <div class="card">3</div>
  </div>
</div>

<!-- Demo -->
<div class="control">
  <button>Add card</button>
  <label for="color">Change colour <input type="color" value="#666666"></label>
</div>

JavaScript 解决方案

const setCardBackgroundColors = () => {
  const cards = [...document.querySelectorAll(".card")];

  cards && cards.length && cards.forEach((card, index) => {
    index % 2 && card.classList.add('has-bg-dark');
  })
}


// Just for demo
const template = (level) => {
  return `
    <article class="card">
       <p>${level}</p>
    </article>
    `
}
document.querySelector("button").addEventListener("click", () => {
  const cards = document.querySelectorAll(".card");
  const lastCard = cards[cards.length - 1];

  lastCard.insertAdjacentHTML('beforeend', template(cards.length + 1));
  setCardBackgroundColors();
});

.card {
  background-color: #555;
  color: white;
  padding: 1rem;
  border-radius: 0.25em;
  position: relative;
}

.card.has-bg-dark {
  background-color: #222;
}

/* demo styles */
* {
  box-sizing: border-box;
}

body {
  font: 18px/1.2 system-ui;
  padding: 1rem;
}

.control {
  position: fixed;
  bottom: 0;
  left: 0;
  display: grid;
  grid-gap: 0.5rem;
  background: black;
  color: white;
  padding: 1rem;
}

<article class="card">
  <p>1</p>
</article>

<!-- Demo -->
<div class="control">
  <button>Add card</button>
</div>