Question

~适用于以下兄弟选择器。

如何在引用课程.content时选择课程.select？

HTML

<ul>
  <li> <a>content</a> </li>
  <li> <a class="select">selected li</a> </li>
  <li> <a>content</a> </li>
</ul>
<div class="content">
  selected content
<div>

CSS（不工作）

ul > li > a.select ~ .content {
  /* something */
}

Answer 1

遗憾的是，CSS无法实现，但您可以使用JQuery，例如

<script type="text/javascript">    
    $(".selected").parent().parent().siblings(".content").css("color", "red");
</script>

$（“。selected”）您从'a'标记开始
.parent（）移至父'li'
.parent（）移至父'ul'
.siblings（“。content”）匹配您目前所在的'ul'的所有兄弟姐妹#content'
.css（“color”，“red”）做你喜欢的任何花哨的css;）

Answer 2

目前没有办法在CSS中选择类.content来引用类.select。

但是，如果您稍微更改标记，则可以使用target伪类

执行与您尝试执行的操作类似的操作

<强> FIDDLE

CSS遵循兄弟姐妹选择器

2 个答案: