先看一个效果，注意地址栏的变化再想想，怎么用CSS实现呢？CSS选择器的有限选择器是CSS的一大特性，用于选择需要设置样式的元素。选择器有很多种，比如元素选择器p{color:gray;}classselector.box{color:gray;}ID选择器#title{color:gray;}属性选择器[title]{color:gray;}Descendantselectorh1span{color:gray;}Adjacentsiblingselectorh1+p{margin-top:50px;}这里只是一小部分，还有更多。不熟悉的可以自行搜索。虽然CSS选择器种类繁多，可以满足大部分需求，但有时还是会出现一些看似合理，实则棘手的问题。比如上面提到的相邻兄弟选择器，但是它只能选择后面的兄弟节点，而不能选择前面的兄弟节点。后代选择器可以选择子元素，但不能选择父元素。用另一种思维方式突破局限。上面列出了两个常见的需求，但是CSS不支持它们。如何解决？这里不考虑JS，这是两个完全不同的思维领域。这里我们以前面兄弟选择器的实现为例来寻找关联。首先，我们需要找到与需求相关的选择器，毕竟我们必须基于现有的选择器。这里所说的关系是指相似或相反。例如，子选择器p>span和后代选择器pspan比较相似。如果你想实现鼠标相关的功能，你可能会想到:hover和:active等选择器。这里要实现前置兄弟选择器，显然需要联系已有的相邻兄弟选择器+和后置选择器~，它们都属于兄弟节点。其实解决问题是有办法的，很常见。比如有这样的布局，我想让span前面的a（也就是label1和label2）是红色字体
我们使用了后面的选择器~，其实就是上面指定的位置关系是以html文档中的位置为准的。我们可以手动反转这些位置那么我们可以采取很多方法来恢复页面的顺序。比如a,span{float:right}在页面上看到的顺序还是和之前一样，分别是label1,label2,description,label3,label4，然后就可以直接使用post选择器了~span~a{color:red}这是视觉预选选择器的效果吗？但是需要提前把html中的结构倒过来，通过一些样式的顺序是正常的。还有一种思路，封面替换的布局和之前一样我们可以这样实现，先把a全部设置为红色，然后把span后面的a恢复，不就达到目的了吗？diva{color:red;}span~a{color:unset;}也达到了这个目的。CSS地址选择器？这里可以明确说明，CSS没有地址选择器。这里所说的地址是指浏览器的地址栏，比如http://test.com/ahttp://test.com/b或者http://test.com#ahttp://test.com#b可能有人会认为这是一个虚假的需求。我的地址变了，他们不在同一页上。如果我在不同的页面上写不同的CSS可以吗？这种想法在某些情况下是正确的，但在某些情况下也存在一些问题。比如从http://test.com#a到http://test.com#b，一般都是同一个页面，而且，现在很多单页应用地址栏的变化不会引起刷新的浏览器页面。地址的变化完全是前端路由的需求。其实我第一时间想到这个选择器，就是主题选择的功能。例如http://test.com和http://test.com#light代表普通主题，http://test.com#dark代表深色主题。这样做的一个好处是可以从地址栏直观的看到主题颜色，比如直接输入http://test.com#dark就可以进入深色主题。类似的想法是下面的伪代码#lightdiv{background:#fff;颜色：#000;}#darkdiv{背景：#000;color:#fff;}当然现在跟地址栏没关系了。那么，如何通过这种方式实现一个地址选择器呢？根据以上思路，我们首先考虑与地址关联的选择器。乍一看，我们真的找不到合适的。后来我们发现：目标选择器，这个是用来选择当前激活的HTML锚点的。官方的例子也很简单。简单来说，如果当前地址栏是#new，那么文档中id为new的元素就会被选中。下面是w3schoolhttp://www.w3school.com.cn/tiy/t.asp?f=css_sel_target实现的例子那么如何实现我们需要的功能呢？这里有一个简单的布局Demo
Demo