如何隐藏奇怪但只有可见的标题？

时间：2018-10-05 03:37:53

标签： html css 

.test{
display:none;
}

.title:nth-child(odd){
  background: #ddd;
}
<div class='title'>lorem</div>
<div class='title'>lorem</div>
<div class='title test'>lorem</div>
<div class='title'>lorem</div>
<div class='title'>lorem</div>
<div class='title'>lorem</div>
<div class='title'>lorem</div>

如果test是可见的-没问题-odd标题为阴影。

如果test不可见-阴影规则丢失。

如何为odd着色但仅显示可见标题？

1 个答案:

答案 0 :(得分：0)

纯CSS解决方案

两个纯CSS解决方案

解决方案1 ​​

  • 使父节点（在这种情况下为<body>）为弹性列容器
  • 将.title:nth-child(odd)更改为(even)
  • 将order: 3分配给相邻的同级.test + div

说明

由于.test仍在HTML中，因此它将始终被视为处于奇数位置，因此更改阴影图案甚至可以纠正这种情况。 使用 order 弹性框属性，我们可以 视觉 移动标签， 但是 < / strong>就HTML代码本身而言，位置仍然相同。将第4个div明显地放置到第3个中并不会使其变为奇数，它将保留偶数标签的阴影。

解决方案2

  • 全部<div> color:transparent
  • 为每次潜水分配::before个伪类content:n n=original position number/for 3+ offset by +1
  • 所有div::before color:#000

    说明

此解决方案使用::Before来显示该位置而不是实际位置的标题。因此1和2是准确的，但在第三位置现在是4，依此类推。最后一个标题是display:none，而不是位置3 .test。当JosephSible引起我的注意是标题不正确时，出现了这种复杂的解决方案，因此解决方案1 ​​ “不起作用” ，而我恳求自OP从未提及订单，解决方案2 并未中断。请查看 Demo2。

演示1 

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      display: flex;
      flex-flow: column nowrap;
    }
    
    .title:nth-child(even) {
      background: #ddd;
    }
    
    .test {
      display: none;
    }
    
    .test+div {
      order: 3
    }
  </style>
</head>

<body>
  <div class='title'>lorem</div>
  <div class='title'>lorem</div>
  <div class='title test'>lorem</div>
  <div class='title'>lorem</div>
  <div class='title'>lorem</div>
  <div class='title'>lorem</div>
  <div class='title'>lorem</div>
</body>

</html>

演示2 

<!DOCTYPE html>
<html>

<head>
  <style>
    .title:nth-child(even) {
      background: #ddd;
    }
    
    div {
      color: transparent;
    }
    
    .test {
      background: #ddd;
    }
    
    div:first-of-type::before {
      content: '1';
    }
    
    div:nth-of-type(2)::before {
      content: '2';
    }
    
    .test::before {
      content: '4'
    }
    
    .test+div::before {
      content: '5'
    }
    
    .test+div+div::before {
      content: '6'
    }
    
    .test+div+div+div::before {
      content: '7';
    }
    
    .test+div+div+div+div {
      display: none;
    }
    
    div::before {
      color: #000
    }
  </style>
</head>

<body>
  <div class='title'>1</div>
  <div class='title'>2</div>
  <div class='title test'>3</div>
  <div class='title'>4</div>
  <div class='title'>5</div>
  <div class='title'>6</div>
  <div class='title'>7</div>
</body>

</html>

相关问题
最新问题