使用 "+"激活的 CSS 定位不起作用

Question

我打算使用 + 更改 css 中 div 的位置(例如:p.foo:hover + div.foo {})，但它似乎没有才能正常工作。

.foo { 
  width: 200px;
  height: 50px;
  padding: 5px;
  overflow: hidden;
  position: absolute;
  top: 0px;
  right: 0px;
  -webkit-transition: top 1s ease-out, right 1s ease-out;
          transition: top 1s ease-out, right 1s ease-out;
}

#footext:valid {
  outline: solid blue 2px;
}
#footext:invalid {
  outline: solid red 2px;
}
#footext:valid + .foo {
  top: 50px;
  right: 50%;
}

<div class="foo">
    <input id="footext" autocomplete="off" type="text" name="q" value="" placeholder="Search" required />
</div>

Edit the code here

编辑:修复了链接和此处的代码

Answer 1

没有用于选择所选子项的父项的 CSS 选择器。

这可以用 JavaScript 完成

+ CSS 选择器将选择属于同一父元素的下一个子元素的任何元素。

B + E :作为 B 元素的下一个兄弟的任何 E 元素

引用:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

另见:

http://www.w3schools.com/cssref/css_selectors.asp