Question

是否有可能没有SASS，LESS，Javascript-只是纯CSS可以做类似的事情：

.B
{
    display: none;
}

.A:empty
{
     display: none;

     .B
     {
         display: block;
     }
}

因此，当类'A'为空时，对容器'B'进行其他操作吗？还是当类“ A”处于某种状态时，对容器B做其他事情？

示例：

Hover A -> Hide B
Hide B -> Show C
C Empty -> Show D

我尝试为这些州找到正确的用语，但尚未找到任何内容-如果有的话？

非依赖性：

我不希望这些类彼此依赖。

<div class="A"><div class="B"></div></div>

...不是解决方案。

<div class="A"></div>
<div class="B">Show me when condition in A is reached<div>

从那时起，我就可以做我想做的一切。我希望A类位于页面的某个部分，B类位于其他容器中的其他容器内-与A类无关。

Answer 1

没有CSS不支持类似于您所描述的任何预建条件，对不起

Answer 2

编辑：添加更多信息

每次有人告诉您不存在的东西，不值得做或更好地像他们一样做。深入研究。

链接：

示例：

 <style type="text/css">
      /* year comes last */
      time[datetime]:after {
        float: right;
        content: attr(datetime);
      }

      /* month and day come first */
      time[datetime*="-"] {
        float: left;
      }

      /* Months (non-USA) */
      time[datetime^="01-"]:after {
        content: "jan/";
      }

      ...rules for the other months go here...

      time[datetime^="12-"]:after {
        content: "dec/";
      }

      /* Days (non-USA) */
      time[datetime$="-01"]:before {
        content: "1/";
      }

      ...rules for the other days go here...

      time[datetime$="-31"]:before {
        content: "31/";
      }

      /* Months (USA) */
      *[lang="en-US"] time[datetime^="01-"]:before {
        content: "jan/";
      }

      ...rules for the other months go here...

      *[lang="en-US"] time[datetime^="12-"]:before {
        content: "dec/";
      }

      /* Days (USA) */
      *[lang="en-US"] time[datetime$="-01"]:after {
        content: "1/";
      }

      ...rules for the other days go here...

      *[lang="en-US"] time[datetime$="-31"]:after {
        content: "31/";
      }

  </style>

Answer 3

没有，没有办法。当元素同时具有A和B类时，可以实现以下条件。另一种方法是将带有这些类的元素包装在另一个标签中，例如

<div class="wrapper">
  <div class="A"></div>
  <div class="B"></div>
</div>

，然后在.css中执行以下操作：

.wrapper.A:hover + .B {...}

Answer 4

HTML：

<div class="container">
  <div class="A">One</div>
  <div class="B">Two</div>
  <div class="C">Three</div>
  <div class="D">Four</div>
</div>

CSS：

.container {
  position: relative;
}
.container > div {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  transition: 200ms all;
}
.A {
  left: 10px;
}
.B {
  left: 120px;
}
.C {
  left: 230px;
}
.D {
  left: 340px;
}
.A:hover ~ .B {
  background-color: green;
}
.A:hover ~ .C {
  opacity: 0;
}
.A:hover ~ .D {
  transform: rotate(-45deg);
}
.B:hover ~ .C {
  background-color: green;
}
.B:hover ~ .D {
  opacity: 0;
}

正在运行的演示：Sibling selector

纯CSS条件样式-有这样的东西吗？

4 个答案: