时间戳

首页 > 解决方案 > 仅当找到多个具有类的元素时才应用 CSS

html - 仅当找到多个具有类的元素时才应用 CSS

问题描述

我有 2 张卡片，其中一个类card显示在card-stack. 可以有N张这样的牌。

<div class="card-stack">
  <div class="clear"><button name="clear" value="Clear all" onclick="removeAllCards(this)">Clear All</button></div>
  <div class="card" style="--y:1" onclick="remove(this)">
    <div class="card-header">
      <div class="card-avatar">
        <img src="https://static.thenounproject.com/png/363633-200.png">
      </div>
      <div class="card-title">Announcement 1</div>
    </div>
    <div class="card-body">
      This is announcement 1.
    </div>
  </div>
  <div class="card" style="--y:2" onclick="remove(this)">
    <div class="card-header">
      <div class="card-avatar">
        <img src="https://static.thenounproject.com/png/363633-200.png">
      </div>
      <div class="card-title">Announcement 1</div>
    </div>
    <div class="card-body">
      This is announcement 1.
    </div>
  </div>
</div>

当用户悬停时，card-stack我将一些 CSS 应用到每个card

.card-stack:hover  .card{
  transform: translateY(calc((var(--y) * -105% + 200px)));
  box-shadow: none;
 }

我只想在类有超过 1 个元素的情况下应用 HOVER css card。我如何使用 CSS 做到这一点？

以下代码段的 CodePen

function remove(element) {
  element.remove();
}

function removeAllCards(element) {
  element.remove();
  document.querySelectorAll(".card").forEach(el => el.remove());
}
body {
  background-color: #e8eaed;
}

.card {
  width: 300px;
  min-height: 150px;
  background-color: white;
  position: fixed;
  top: 75vh;
  right: 100px;
  transform: translate(-50%, -50%);
  display: grid;
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 14px;
  color: #00000080;
  box-shadow: 0 5px 15px 0 #00000040, 0 5px 5px 0#00000020;
  transition: transform 200ms;
  padding:15px;
  cursor:pointer;
}

.card {
  transform: translateY(calc((var(--y) * 20px) - 50%)) scale(calc(1.0 + var(--y) * 0.05));
}

.card-avatar {
  display:block;
}
.card-avatar img {
  width:40px;
  height:40px;
  float:left;
}
.card-title {
  font-size:16px;
  display:inline-block;
  margin-top:10px;
  margin-left:10px;
}

.card-header {
  height:30px;
  display: inline-block;
}
.card-body {
  margin-top:-30px;
}

.card-stack:hover  .card{
  transform: translateY(calc((var(--y) * -105% + 200px)));
  box-shadow: none;
 }

.card-stack:hover .clear {
  visibility: visible;
  transform: translateY(calc((var(--y) * -105% + 200px)));
  position:absolute;
  top:2vh;
  right:40px;
}

.card-stack {
  position:fixed;
  width: 400px;
  min-height: 100vh;
  position: fixed;
  right: 65px;
}

.clear {
  visibility:hidden;
}
<div class="card-stack">
  <div class="clear"><button name="clear" value="Clear all" onclick="removeAllCards(this)">Clear All</button></div>
  <div class="card" style="--y:1" onclick="remove(this)">
    <div class="card-header">
      <div class="card-avatar">
        <img src="https://static.thenounproject.com/png/363633-200.png">
      </div>
      <div class="card-title">Announcement 1</div>
    </div>
    <div class="card-body">
      This is announcement 1.
    </div>
  </div>
  <div class="card" style="--y:2" onclick="remove(this)">
    <div class="card-header">
      <div class="card-avatar">
        <img src="https://static.thenounproject.com/png/363633-200.png">
      </div>
      <div class="card-title">Announcement 1</div>
    </div>
    <div class="card-body">
      This is announcement 1.
    </div>
  </div>
</div>

标签： htmlcss

解决方案

一种解决方案是同时针对first-child目标last-child类

.myClass {
  color: tomato;
}

.myClass:first-child:last-child {
  color: DarkSlateGrey;
}
<div>
  <span class="myClass">I'm alone</span>
</div>

<div>
  <span class="myClass">We are two</span>
  <span class="myClass">We are two</span>
</div>

推荐阅读