CSS：具有同级div的树结构，如何只标记CSS的子元素？

aydmsdu9 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(90)

树结构用具有不同左缩进的兄弟div序列来模拟：

.l2 { padding-left: 1em; }
.l3 { padding-left: 2em; }
...

<div class="a"><div class="l1">A1</div></div>
<div class="a"><div class="l2">A2</div></div>
...

仅使用CSS，是否可以只标记比悬停项级别低的兄弟项，而不标记超出同一级别的下一项的兄弟项？
下面的代码片段说明了这个想法，但会过度选择超出当前嵌套级别。无法弄清楚如何不选择与悬停项目具有相同级别的项目的项目比未悬停的项目更接近。
明确地：

将鼠标悬停在A1上应照亮所有标记为A的项目的边框，但不是B。
将鼠标悬停在第二A2上，应该只照亮项目A3的边界，而不是B的边界。
将鼠标悬停在B1上将亮起B2和B3的边界。
将鼠标悬停在B2上将照亮B3的边界，依此类推。

只有CSS才能做到这一点吗？现代CSS很好，不需要向后兼容。
注意，嵌套结构是不可能的，因为这是相当大的虚拟列表的一部分，并且事先不知道有多少个子级别，所以唯一的解决方案是渲染兄弟div并标记它们的缩进。实际的实现有更多的层次，但是如果存在解决方案，生成适当的CSS选择器组合不是问题。
也不允许使用js;如果可能的话，CSS。

* { 
font-family: sans-serif;
border-left: 1px solid transparent; 
--l1-border: 1px solid purple; 
--l2-border: 1px solid blue;
}

.a { width: 150px; padding: 0 3px; }
.a:hover { background-color: #eee; }

.a:has(.l1):has(+ .a .l2):hover ~ .a .l2 {
  border-left: var(--l1-border);
}
.a:has(.l1):has(+ .a .l2):hover ~ .a .l3 {
  margin-left: 0;
  padding-left: 2em;
  border-left: var(--l1-border);
}

.a:has(.l2):has(+ .a .l3):hover ~ .a .l3 {
  border-left: var(--l2-border);
}

.l2 { padding-left: 1em; }
.l3 { padding-left: 1em; margin-left: 1em; }

<div class="a"><div class="l1">A1</div></div>
<div class="a"><div class="l2">A2</div></div>
<div class="a"><div class="l2">A2</div></div>
<div class="a"><div class="l3">A3</div></div>
<div class="a"><div class="l3">A3</div></div>
<div class="a"><div class="l2">A2</div></div>
<div class="a"><div class="l1">B1</div></div>
<div class="a"><div class="l2">B2</div></div>
<div class="a"><div class="l3">B3</div></div>

css

来源：https://stackoverflow.com/questions/76497526/css-tree-structure-with-sibling-divs-how-to-mark-only-sub-elements-with-css

2条答案

按热度按时间

siotufzp1#

有趣的任务！您对当前手动为每个级别指定样式的方法满意吗？到目前为止，我已经想出了一个想法，增加一个悬停，目标是同一级别的下一个兄弟，并删除所有元素的边界。让我知道你对这件事的看法，也许我能找到另一个解决方案。

* {
  font-family: sans-serif;
  border-left: 1px solid transparent;
  --l1-border: 1px solid purple;
  --l2-border: 1px solid blue;
}

.a {
  width: 150px;
  padding: 0 3px;
}

.a:hover {
  background-color: #eee;
}

.a:has(.l1):has(+ .a .l2):hover~.a .l2 {
  border-left: var(--l1-border);
}

.a:has(.l1):has(+ .a .l2):hover~.a .l3 {
  margin-left: 0;
  padding-left: 2em;
  border-left: var(--l1-border);
}

.a:has(.l1):has(+ .a .l2):hover~.a:has(.l1)~.a * {
  border-left: none;
}

.a:has(.l2):has(+ .a .l3):hover~.a .l3 {
  border-left: var(--l2-border);
}

.a:has(.l2):has(+ .a .l3):hover~.a:has(.l2)~.a * {
  border-left: none;
}

.l2 {
  padding-left: 1em;
}

.l3 {
  padding-left: 1em;
  margin-left: 1em;
}

<div class="a">
  <div class="l1">A1</div>
</div>
<div class="a">
  <div class="l2">A2</div>
</div>
<div class="a">
  <div class="l2">A2</div>
</div>
<div class="a">
  <div class="l3">A3</div>
</div>
<div class="a">
  <div class="l3">A3</div>
</div>
<div class="a">
  <div class="l2">A2</div>
</div>
<div class="a">
  <div class="l1">B1</div>
</div>
<div class="a">
  <div class="l2">B2</div>
</div>
<div class="a">
  <div class="l3">B3</div>
</div>

赞(0）回复(0）举报 2023-06-25

mf98qq942#

这可以通过：not和：has的组合来完成，通过为所有跟随悬停元素的元素设置边框，然后为处于“更高”级别的元素或更高级别的元素取消设置边框。

<style>
  * {
    font-family: sans-serif;
    border-left: 1px solid transparent;
    --l1-border: 1px solid purple;
    --l2-border: 1px solid blue;
  }
  
  .a {
    width: 150px;
    padding: 0 3px;
  }
  
  .a:hover {
    background-color: #eee;
  }
  
  .l2 {
    padding-left: 1em;
  }
  
  .l3 {
    padding-left: 1em;
    margin-left: 1em;
  }
  
  .a:has(.l1:hover)~.a:not(:has(.l1)) {
    rbackground: lime;
    border-left: var(--l1-border);
  }
  
  .a:has(.l1:hover)~.a:has(.l1)~* {
    rbackground: transparent;
    border-left: none;
  }
  
  .a:has(.l2:hover)~.a:not(:has(.l2)) {
    border-left: var(--l2-border);
  }
  
  .a:has(.l2:hover)~.a:has(.l1),
  .a:has(.l2:hover)~.a:has(.l1)~*,
  .a:has(.l2:hover)~.a:has(.l2)~* {
    border-left: none;
  }
</style>
<div class="a">
  <div class="l1">A1</div>
</div>
<div class="a">
  <div class="l2">A2</div>
</div>
<div class="a">
  <div class="l2">A2</div>
</div>
<div class="a">
  <div class="l3">A3</div>
</div>
<div class="a">
  <div class="l3">A3</div>
</div>
<div class="a">
  <div class="l2">A2</div>
</div>
<div class="a">
  <div class="l1">B1</div>
</div>
<div class="a">
  <div class="l2">B2</div>
</div>
<div class="a">
  <div class="l3">B3</div>
</div>

但它很快就需要生成长选择器，并且需要知道级别数量的上限，因为目前在CSS中，不可能在选择器中使用变量或计算。
即在现实生活中可能不切实际。
一个有趣的练习，但我不建议它在现实中使用！

赞(0）回复(0）举报 2023-06-25

我来回答

CSS：具有同级div的树结构，如何只标记CSS的子元素？

2条答案

相关问题

热门标签

最新问答