CSS 兄弟元素选着问题 求指教

Question

代码：

<a href="">连接1</a><span>测试</span><a href="">连接2</a>
span + a {...}

疑问：用加号可以选着紧随其后的，那么能不能选着前面的呢？

Answer 1

前置的选择器没有。
猜测原因可能如下：

• 浏览器渲染的过程是顺序的，在前边的标签完全加载完成后才会加载后边的标签
• 如果此时有一个前置的选择器存在，在后方标签加载完毕后进行渲染时可能会导致页面抖动（加载期间应用了某个新的样式）

Answer 2

首先明确一点，没有前置选择器。理由楼上已经说了。

不过，可以换一种思考方式

你把现有的结构调换一下，然后用direction:rtl来改变显示顺序，就可以用 +来实现前置选择器的效果了

<style>
.demo{direction:rtl}
.demo span + a { ... }
</style>
<div class="demo">
    <span>测试2</span><a href="">连接2</a><span>测试1</span><a href="">连接1</a>
</div>

你可以看一下我的文章 http://118.24.110.50/blog/art...

里面有相关的实现思路

Answer 3

目前原生没有这样的选择器 否则前边已经渲染完了 渲染到后边后边又修改前边的样式 前边又得重新渲染 可能会无限循环

Answer 4

目前的CSS还做不到。如果要实现这样的逻辑，要么采用js来实现，要么换另一个思路避开这个问题。