Question

我正在尝试进行CSS选择。我想选择一个在另一个ID选择器之前的ID。这是一个例子：

<div id="wrapper">
     <div class="aside_left">Left content...</div>
     <div class="main_page">Main content...</div>
</div> <!-- end of wrapper -->

我的目标是main_page停留在左侧，aside_left将其位置更改为右侧。

aside_left和main_page都有属性float:left我无法将aside_left属性更改为float:right，因为它位于很多页面中。

是否可以选择其他ID之前的ID或CLASS？

我的选择器应该是这样的：选择.main_page之前的.aside_left

Answer 1

你不能用CSS选择器本身来做这件事。你最好的选择是使用类似jQuery的东西.parent() method。

您可以看到here for CSS3和here for CSS2，这在当前规范中不存在。

CSS4的推测设计确实使用!运算符提供了这样的选择器，但目前在任何浏览器中都不支持。

考虑到这一点，也许考虑改变你想要做的事情背后的逻辑 - 你能不能给改变的元素提供不同的类名来更容易地识别它们？或者从包装元素开始进展？

或者，通过使用：

查看第n个类型选择器

#wrapper .aside_left:nth-of-type(odd)

参见 THIS FIDDLE

这将仅选择.aside_left元素，它们是#wrapper元素的第一个子元素。第一个子节点，就像在DOM中的第一个子节点，而不是第一个显示的节点（使用float可能在视觉上产生不反映实际DOM定位的结果，在这种情况下，您将重新使用jQuery）。

Answer 2

仅当 HTML结构合作是纯CSS可能

我在评论中注意到并且ExtPro在他的回答中指出，纯css是不可能的， 至少在大多数情况下 。但是， 一组条件 是可能的。也就是说，当存在除#wrapper之外的其他内容时，html中的.main_page会有更多子元素。这将是一个非常具体的案例要求，可能不符合您的情况（可能不是基于您对ExtPro的评论），但如果是这样，那么此代码可以工作：

#wrapper > .aside_left:nth-last-of-type(2) {
    float: right;
}

See an example fiddle here.您看到 如何要求仅在.main_page存在 的情况下才有两个元素，并且需要更多如果.main_page不存在，则会出现元素。所以这在技术上并不是关键.main_page本身，而是使用html结构根据存在的兄弟元素的数量来改变前面的元素。

Answer 3

在纯CSS中你可以使用display：flex和order，尽管在.main_page的流程中有位置:(将鼠标悬停在两个切换边上）。

 /* using your HTML */
 #wrapper {
  display: flex;
  flex-flow: row wrap;
  height:200px;
  width:80%;
  margin:auto;
}
#wrapper > div {
  width:20%;
  box-shadow:inset 0 0 1px;
  order:2;
}
#wrapper .main_page {
  width:80%;
}
#wrapper > div.aside_left {
background:gray;
}
#wrapper > div.main_page:hover {
  order:1;
}

在http://codepen.io/gc-nomade/pen/Iywbj的现场直播，请参阅此处的一些提示：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果你将2 div设置为inl'ne-box并恢复childs div上的方向，你也可以重置#wrapper上的方向

如何选择在另一个ID之前的ID

3 个答案:

仅当 HTML结构合作是纯CSS可能