css里的
#tab1:target ~ .tabs li a[href="#tab1"], #tab2:target ~ .tabs a[href="#tab2"], #tab3:target ~ .tabs a[href="#tab3"] {
border-bottom-color:#fff;
}
“#tab1:target ~ .tabs li a[href="#tab1"]”这个是什么意思?CSShtml

解决方案 »

  1.   

    1.target参考:http://www.qianduan.net/css3-target-pseudo-class-introduction.html
    2.'~'参考:http://mozilla.com.cn/post/21668/
      

  2.   

    .tabs li a[href="#tab1"]
    表示: 
    所有className为"tabs"下的[<li>标签]下的[<a href="#tab1">标签].
    而前面
    #tab1:target~xxxxxxx
    表示
    id为tab1的, target属性符合xxxxxx条件的东西. 所以lz结合起来分析一下.. 
      

  3.   

    那按照你的分析,最终css应该是加在#tab1:target上,后面.tabs li a[href="#tab1"]只是对前半部分的地位?
      

  4.   

    这种奇怪的东西要用奇怪的方式看。
    tabs 要放在下面的。
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style>
    #tab1:target  ~ .tabs li a[href="#tab1"],#tab2:target  ~ .tabs a[href="#tab2"],#tab3:target 
    ~ .tabs a[href="#tab3"] {
    background-color: #432;
    }
    </style>
    </head>
    <body>


    <div id="tab1" class="tab_content">
    tabs1
    </div>
    <div id="tab2" class="tab_content">
    tabs2
    </div>
    <div id="tab3" class="tab_content">
    tabs3
    </div>
    <ul class="tabs">
    <li><a href="#tab1">标签一</a></li>
    <li><a href="#tab2">标签二</a></li>
    <li><a href="#tab3">标签三</a></li>
    </ul>
    </body>
    </html>
      

  5.   

    参考了一下2#的1.target参考:http://www.qianduan.net/css3-target-pseudo-class-introduction.html
      

  6.   

    #tab1:target~xxxxxx{style}的意义应该是
    #tab1在相应target伪事件时, xxxxxx执行{style}例如:
    #tab1:target  ~ .tabs li a[href="#tab1"]换为
    #tab1:target  ~ .tabs li a[href="#tab2"]表示在#tab1:target~(被点击时), .tabs li a[href="#tab2"]的<a>标签执行下述样式
      

  7.   


    我用的FF22和ie10,还是看不到效果,你在本地试过么?
      

  8.   


    点<li><a href="#tab1">标签一</a></li>
            <li><a href="#tab2">标签二</a></li>
            <li><a href="#tab3">标签三</a></li>
      

  9.   

    想兼容低版本的ie最好不要这么写,还是用class保险一些:target的说明及示例
    https://developer.mozilla.org/en-US/docs/Web/CSS/:target
      

  10.   

    选择符的属性(tabs li a[href="#tab1"])最好也不要用.ie6我知道是不支持的
      

  11.   

    原来是没有效果...用IE6是铁定不行的. 对CSS3完全不支持. 可以用新版firefox试试