仅当最后一个孩子可见时如何应用 CSS 样式

Question

我有这个问题，我需要对 div 应用一些样式，只有当它位于可见项目旁边时（即使中间有不可见项目，但如果当前项目后面的所有项目都是不可见的，则不需要），如图所示：

https://stackblitz.com/edit/js-3nulnw?file=style.css

.container {
  display: flex;
  flex-grow: 1;
  padding: 5px;
}

.content {
  border: 1px solid #000000;
  border-radius: 4px;
  width: 50%;
  padding: 10px;
}

.addon {
  width: 10%;
  background-color: #ff0000;
  border: 1px solid #000000;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
}

.addon.hidden {
  display: none;
}

.content:not(:last-child),
.addon:not(:last-child) {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

<div class="container">
  <div class="content">This is shown correctly (no addons)</div>
</div>

<div class="container">
  <div class="content">This is shown correctly (one addon)</div>
  <div class="addon"></div>
</div>

<div class="container">
  <div class="content">
    This is shown correctly (multiple addons, one is hidden)
  </div>
  <div class="addon hidden"></div>
  <div class="addon"></div>
</div>

<div class="container">
  <div class="content">This is shown correctly (multiple addons)</div>
  <div class="addon"></div>
  <div class="addon"></div>
</div>

<div class="container">
  <div class="content">This should have all rounded borders</div>
  <div class="addon hidden"></div>
</div>

<div class="container">
  <div class="content">This should have all rounded borders</div>
  <div class="addon"></div>
  <div class="addon hidden"></div>
</div>

我曾尝试在互联网上查找但无济于事，但我可能正在寻找错误的答案（我发现的大部分内容都是其他 SO 问题，说没有用于不可见项目的 CSS 选择器），因此可以使用其他方法这样做是受欢迎的（可能没有 JS）

Answer 1

是的，这是可能的。我试着理解你的问题并得到这个结果。请解释更多你的问题 https://developer.mozilla.org/en-US/docs/Web/CSS/:is

我们可以通过 (:is) 伪类函数得到它。我们可以检查 div 是否具有以下示例中可见的类，然后我们可以通过 (+) 相邻兄弟选择器或 (~) 通用兄弟选择器将样式应用于其下一个 div。我希望例子能清楚我想说什么

<div class="container">
  <div class="content">This is shown correctly (no addons)</div>
</div>

<div class="container">
  <div class="content">This is shown correctly (one addon)</div>
  <div class="addon"></div>
</div>

<div class="container">
  <div class="content">
    This is shown correctly (multiple addons, one is hidden)
  </div>
  <div class="addon hidden"></div>
  <div class="addon"></div>
</div>

<!-- [ADD 'visible' CLASS BEFORE OF TARGET CONTAINER] -->
<div class="container visible">
  <div class="content">This is shown correctly (multiple addons)</div>
  <div class="addon"></div>
  <div class="addon"></div>
</div>

<div class="container">
  <div class="content">This should have all rounded borders</div>
  <div class="addon hidden"></div>
</div>

<div class="container">
  <div class="content">This should have all rounded borders</div>
  <div class="addon"></div>
  <div class="addon hidden"></div>
</div>

它的 css 将是

.container {
  display: flex;
  flex-grow: 1;
  padding: 5px;
}

.content {
  border: 1px solid #000000;
  border-radius: 4px;
  width: 50%;
  padding: 10px;
}

.addon {
  width: 10%;
  background-color: #ff0000;
  border: 1px solid #000000;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
}

.addon.hidden {
  display: none;
}

.content:not(:last-child),
.addon:not(:last-child) {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; 
}


.container:is(.visible) + .container{
  background-color: rebeccapurple;
  color: white;
  /* Your style here */
}

.container:is(.visible) + .container .addon{
  background-color: brown;
  color: white;
  /* Your style here */
}

Answer 2

我找到了一种可怕但显然有效的方法来实现我想要的东西

https://stackblitz.com/edit/js-4hkorq?file=style.css

.container {
  display: flex;
  flex-grow: 1;
  padding: 5px;
}

.content {
  border: 1px solid #000000;
  border-radius: 4px;
  width: 50%;
  padding: 10px;
}

.addon {
  width: 10%;
  background-color: #ff0000;
  border: 1px solid #000000;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
}

.addon.hidden {
  /* display: none; */
  visibility: hidden;
  width: 0px;
}

.content:not(:last-child),
.addon:not(:last-child) {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.container > div:last-of-type.hidden::before {
  content: '';
  border: 1px solid #000000;
  border-radius: 4px;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 100%;
  display: flex;
  width: 4px;
  visibility: visible;
  position: relative;
  top: -1px;
}

.container > .addon + div:last-of-type.hidden::before {
  background-color: #ff0000;
}

<div class="container">
  <div class="content">This is shown correctly (no addons)</div>
</div>

<div class="container">
  <div class="content">This is shown correctly (one addon)</div>
  <div class="addon"></div>
</div>

<div class="container">
  <div class="content">
    This is shown correctly (multiple addons, one is hidden)
  </div>
  <div class="addon hidden"></div>
  <div class="addon"></div>
</div>

<div class="container">
  <div class="content">This is shown correctly (multiple addons)</div>
  <div class="addon"></div>
  <div class="addon"></div>
</div>

<div class="container">
  <div class="content">This should have all rounded borders</div>
  <div class="addon hidden"></div>
</div>

<div class="container">
  <div class="content">This should have all rounded borders</div>
  <div class="addon"></div>
  <div class="addon hidden"></div>
</div>

诀窍是使用visibility: hidden 和width: 0 而不是display: none，然后添加一个添加边框的::before 伪元素。它的缺点是向元素添加 4 个像素（为了具有 4 个像素的边界半径，它需要至少 4 个像素宽）但在我的情况下它是可以接受的并且（尽管有一些调整）它也适用于我的应用。 出于某种原因，我不得不添加top: -1px，因为否则它不会对齐，但在我的应用程序中我不需要这样做

Answer 3

这些是 CSS 的主要变化

.container {display: table; table-layout: fixed; width: 100%...}
.addon {display: table-cell; position: relative; right: 5px; 
       z-index: 1; padding-right: 5px;...}
.addon+.addon {right: 10px; padding-right: 10px;...}
.content {display: table-cell;} 

由于这是一个纯 CSS 解决方案，因此更改了标签以便 :*-type-of 有效工作。如果你想要一个统一的高度，在.content里面添加一个div，并给它一个绝对高度（即px）

section:first-of-type > div {
  border-top: 1px solid #000000;
}

section:last-of-type > div {
  border-bottom: 1px solid #000000;
}

.container {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.content {
  display: table-cell;
  padding: 15px;
  width: 50%;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-top: 0.5px solid #000000;
  border-bottom: 0.5px solid #000000;
  border-radius: 4px;
}

.addon {
  display: table-cell;
  width: 10%;
  position: relative;
  right: 5px;
  padding-right: 5px;
  z-index: 1;
  background-color: #ff0000;
  border-left: 0;
  border-right: 1px solid #000000;
  border-top: 0.5px solid #000000;
  border-bottom: 0.5px solid #000000;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.addon.hidden {
  display: none;
}

.addon+.addon {
  right: 10px;
  padding-right: 10px;
}

<section class="container">
  <div class="content">This is shown correctly (no addons)</div>
</section>
<section class="container">
  <div class="content">This is shown correctly (one addon)</div>
  <aside class="addon visible"></aside>
</section>

<section class="container">
  <div class="content">
    This is shown correctly (multiple addons, one is hidden)
  </div>
  <aside class="addon hidden"></aside>
  <aside class="addon visible"></aside>
</section>

<section class="container">
  <div class="content">This is shown correctly (multiple addons)</div>
  <aside class="addon visible"></aside>
  <aside class="addon visible"></aside>
</section>

<section class="container">
  <div class="content">This should have all rounded borders</div>
  <aside class="addon hidden"></aside>
</section>

<section class="container">
  <div class="content">This should have all rounded borders</div>
  <aside class="addon visible"></aside>
  <aside class="addon hidden"></aside>
</section>