第二张图片不可见

Question

嘿，我有一点问题，我无法解决。

这是CSS：

.error {
  float: left;
  color: #F00;
  visibility: hidden;
  display: inline;  
}
.validieren:required:invalid + .error {
   visibility: visible;
}

.right {
  float: left;
  color: #0F0;
  visibility: hidden;
  display: inline;
}

.validieren:required:valid + .right {
  visibility: visible;
}

这是HTML代码：

<img src="haken.gif" class="right"> <img src="kreuz.gif" class="error">

问题是第二个（在这种情况下是错误的）图像没有出现。

感谢您的帮助。

对不起我的语言我是德国人。

Answer 1

试试这个：

.validieren:required:invalid ~ .error {
   visibility: visible;
}

您同时拥有.validieren + .error和.validieren + .right。

.validieren .error和.right无法立即跟踪.validieren {/ 3}}。

更改为adjacent sibling selector应该会有效。我假设{{1}}元素在两个图像之前（和它们共享同一个父元素）。

Answer 2

您为visibility: hidden类设置了error，该类已分配给第二张图像。你期待什么行为？

Answer 3

问题是，您的error类包含一个强制您的图片（或元素）不显示的属性（特别是visibility: hidden）。