Question

我想在CSS之前选择一个元素，在给定类之后选择一个元素。我想知道这是否可能......这是我的清单：

<ul>
    <li>one</li>
    <li>two</li>
    <li class='active'>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
</ul>

我想将一些样式应用于.active之前和之后的一个元素。我可以用javascript做 - 没问题，但我想知道这样的事情是否可能：

/* before .active */
ul li.active-element(.active - 1) {
  background:red;
}
/* after .active */
ul li.active-element(.active + 1) {
  background:blue;
}

Answer 1

您无法选择以前的兄弟姐妹。但是，您可以通过

选择下一个兄弟姐妹

ul li.active+ li{
  background:blue;
}

Js fiddle Link

您可以通过Javascript选择以前的兄弟。

Answer 2

使用Pure CSS，您无法使用css选择以前的兄弟。

但您可以选择下一个兄弟var images = new Dictionary<char, Image>() { {'#', Properties.Resources.Image1}, {'.', Properties.Resources.Image2}, {'$', Properties.Resources.Image3}, {'@', Properties.Resources.Image4}, }; char[][] data = new char[][]{ new char[] {'#','.','#'}, new char[] {'#','$','#'}, new char[] {'#','@','#'}, new char[] {'#','#','#'}, }; var dt = new DataTable(); for (int i = 0; i < data.Max(x => x.Count()); i++) dt.Columns.Add(string.Format("C{0}", i), typeof(Image)); data.ToList().ForEach(a => dt.Rows.Add(a.Select(x=>images[x]).ToArray())); this.dataGridView1.DataSource = dt;选择器的下一个兄弟，即

但是在某些情况下，你可以让以前的兄弟姐妹看起来像选中（但它有其局限性）。

对于之前的兄弟姐妹，如果您只想在前一个项目上应用li.active + li { background: blue; }，则可以使用伪类（即background-color或:before的活动元素来选择先前的项目。< / p>

:after

.list {
  list-style: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.list li {
  position: relative;
  padding: 3px 10px;
}
.list li.active {
  background: green;
}
.list li.active:before {
  position: absolute;
  background:red;
  height: 100%;
  bottom: 100%;
  content: '';
  z-index: -1;
  right: 0;
  left: 0;
}
.list li.active + li {
  background:blue;
}

使用JavaScript（jQuery Framework），您可以选择之前选择的上一个兄弟。

您可以使用jQuery的.prev()方法选择以前的兄弟，即

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li class='active'>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ul>

$('.list li.active').prev().addClass('prev');

$(function() {
  $('.list li.active').prev().addClass('prev');
});

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list li {
  padding: 3px 10px;
}
.prev {
  background: red;
}

.active {
  background: green;
}
.active + li {
  background: blue;
}

Answer 3

使用CSS，您可以选择在div.active之后立即放置的元素。在您的情况下，代码将如下所示：

li.active + li {...}

但之前不可能选择一个。有关详细信息，请访问此link

Answer 4

正如其他人所说，不，你不能选择以前的兄弟姐妹。有一些与SASS / SCSS和LESS的组合，但这在实践中并不是很好。

但是，我们可以期待:past in CSS4，但需要一些时间才能获得浏览器支持。

选择活动元素的上一个和下一个兄弟

4 个答案: