Question

在我研究这篇文章的过程中，我偶然发现了 this thread ，但是因为它已经有2年了，我想知道是否有最近的方法来定位一个正好在另一个之前的元素。

例如：

<span> Element Before Div </span>
<div id="thediv"> Target Span From Here Using #thediv </div>

是否有 CSS 可以实现此目的？
我知道使用 jQuery，我宁愿不使用，如果可以使用普通的CSS。

提前谢谢。

编辑：澄清用法的例子。

  <ul>
     <li>
        <span>SubTitle Span</span>
        <div class="subdiv">Some content after SubTitle</div>
     </li>
     <li>
        <span>Item Description</span>
        <div>Item Content</div>
     </li>
     <li>
        <span>Item Description</span>
        <div>Item Content</div>
     </li>
     <li>
        <span>SubTitle Span</span>
        <div class="subdiv">Some content after SubTitle</div>
     </li>
     <li>
        <span>Item Description</span>
        <div>Item Content</div>
     </li>
     <li>
        <span>Item Description</span>
        <div>Item Content</div>
     </li>
     <li>
        <span>SubTitle Span</span>
        <div class="subdiv">Some content after SubTitle</div>
     </li>
     <li>
        <span>Item Description</span>
        <div>Item Content</div>
     </li>
  </ul>

Answer 1

单独使用CSS

是不可能的

如果您的HTML结构如下，则可以使用CSS

<div id="thediv"> Target Span From Here Using #thediv </div>
<span> Element Before Div </span>

例如，使用div更改跨度的颜色，您将写为

#thediv + span {
color:blue;
}

这称为adjacent sibling selecto r。

CSS中无法定位前一个元素，但可以如上所示定位后续元素。

Answer 2

实际上，确实没有办法选择span。

4级建议：

    !span li > div.subdiv {/* would style span if 
                              inside li that has a  
                              div.subdiv  
                              as direct child */}

所以我们也可以这样做：!span li > div.subdiv:hover {}。

http://www.w3.org/TR/2013/WD-selectors4-20130502/#subject（也许我很想理解英语的潜意识）<edit> 实际上我错过了这个：http://dev.w3.org/csswg/selectors4/#profiles </edit>

今天，（4月14日）无法通过CSS直接设置span的样式，

但CSS可以提供一些转身来隐藏它或改变背景颜色。

像这个愚蠢的测试:) http://codepen.io/anon/pen/kxwtB/超过div并且相信span会收到一些CSS样式。

实际上我也很好奇你希望看到哪种规则被修改为跨度。

目标元素就在其他元素之前

2 个答案: