第2章 CSS3选择器-2

层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。

子选择器、相邻兄弟选择器和通用兄弟选择器要IE7及以上版本才支持，随着IE6的慢慢消失，层次选择器可以放心使用。

在层次选择器中，后代选择器与子选择器是比较常用的，而对于相邻兄弟选择器和通用兄弟选择器而言，平时大家并不常使用，特别是CSS3选择器中新增的通用兄弟选择器。

• 页面中有10个div元素，其中第四个div包含了2个div，另外第七个div包含了第八个，而第八个div又包含了第九个div,并且第九个div包含了第十个div。

    
    
    
        *{margin: 0;padding: 0;}        body{width: 300px;margin: 0 auto;}        div{margin: 5px;padding: 5px;border: 1px solid #ccc;}    
    1
    2
    3
    4        5
        6
    
    7        8            9                10
            
        
    

页面初步效果

为了更好的理清这些div的层次关系，可以先将示例中的body部分画一个DOM树形草图，如下所示：

body 的树形结构

后代选择器（E F也称为包含选择器，作用就是可以选择某元素的后代元素。）

后代选择器两选择符之间必须以空格隔开，中间不能有任何其他符号插入。

*{margin: 0;padding: 0;}body{width: 300px;margin: 0 auto;}div{margin: 5px;padding: 5px;border: 1px solid #ccc;}div div{background: orange;}    

使用后代选择器的效果

子选择器（E > F）只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E > F表示选择了E元素下所有子元素F。与后代选择器不一样的是，后代选择器中F是E的后代元素，而子选择器中，F仅仅是E的子元素而已。

*{margin: 0;padding: 0;}body{width: 300px;margin: 0 auto;}div{margin: 5px;padding: 5px;border: 1px solid #ccc;}div div{background: orange;}body > div{background: green;}    

使用子选择器的效果

相邻兄弟选择器（E + F）可以选择紧接在另一个元素后的元素，它们具有一个相同的父元素。换句话说，E和F是同辈元素，F元素在E元素后面，并且相邻，这样就可以使用相邻兄弟选择器来选择F元素。

    
    
    
        *{margin: 0;padding: 0;}        body{width: 300px;margin: 0 auto;}        div{margin: 5px;padding: 5px;border: 1px solid #ccc;}        div div{background: orange;}        body > div{background: green;}        .active + div {background: lime;}    
    
    
    1
    2
    3
    4        5
        6
    
    7        8            9                10
            
        
    

使用相邻兄弟选择器效果

通用兄弟选择器（E ~ F）是CSS3新增加的，用于选择某个元素后面的所有兄弟元素，他们和相邻兄弟选择器类似，需要在同一个父元素中。也就是说，E和F元素都是同辈元素，并且F元素在E元素之后，E ~ F将选中E元素后面的所有F元素。

*{margin: 0;padding: 0;}body{width: 300px;margin: 0 auto;}div{margin: 5px;padding: 5px;border: 1px solid #ccc;}div div{background: orange;}body > div{background: green;}.active + div {background: lime;}.active ~ div {background: red;}

使用通用兄弟选择器效果

通用兄弟选择器中的是与E元素相邻的后面兄弟元素F，其选中的是一个或多个元素；而相邻兄弟选择器中的仅是与E元素相邻并且紧挨的兄弟元素F，其选中的仅是一个元素。

伪类选择器对于大家来说最熟悉的莫过于":link",":visited",":hover",":active"，因为这些是大家平时常用到的伪类选择器。而CSS3的伪类选择器可以分为六种：动态伪类选择器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器、结构为了选择器和否定伪类选择器。

伪类选择器语法书写时和其他的CSS选择器写法有所区别，都以冒号（:）开头。例如：

E:pseudo-class {property:value}    

锚点伪类的设置必须遵守一个“爱恨原则” LoVe/HAte,也就是“link-visited-hover-active”。

E:hover 在IE6浏览器中仅支持链接锚点 a:hover

根据用户的行为不同，按钮效果可以分为：默认状态、悬浮状态、点击时状态、焦点状态和点击后状态，可以按照CSS3的动态伪类选择器，在不同状态下给按钮赋予不同的样式风格。

    
    
    
        .download-info {
            text-align: center;
        }
        
        .btn {
            background-color: #0074cc;
            *background-color: #0055cc;
            
            background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
            background-image: -webkit-linear-gradient(linear, 0 0, 0 100%, form(#0088cc), to(#0055cc));
            background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
            background-image: -o-linear-gradient(top, #0088cc, #0055cc);
            background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
            background-image: linear-gradient(top, #0088cc, #0055cc);
            background-repeat: repeat-x;
            display: inline-block;
            *display: inline;
            border: 1px solid #ccc;
            *border: 0;
            border-color: #ccc;
            
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            border-radius: 6px;
            color: #fff;
            cursor: pointer;
            font-size: 20px;
            font-weight: normal;
            filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
            filter: progid:dximagetransform.microsoft.gradient(enabled=false);
            line-height: normal;
            padding: 14px 24px;
            text-align: center;
            
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            text-decoration: none;
            vertical-align: middle;
            *zoom: 1;
        }
        
        .btn:hover {
            background-position: 0 -15px;
            background-color: #0055cc;
            *background-color: #004ab3;
            color: #fff;
            text-decoration: none;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            
            -webkit-transition: background-position 0.1s linear;
            -moz-transition: background-position 0.1s linear;
            -ms-transition: background-position 0.1s linear;
            -o-transition: background-position 0.1s linear;
            transition: background-position 0.1s linear;
        }
        
        .btn:active {
            background-color: #0055cc;
            *background-color: #004ab3;
            background-color: #004499 9;
            background-image: none;
            outline: 0;
            
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
            color: rgba(255, 255, 255, 0.75);
        }
        
        .btn:focus {
            outline: thin dotted #333;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }    
    
        
默认状态
        View project on GitHub
        
悬浮状态
        View project on GitHub
        
点击状态
        View project on GitHub
        
焦点状态
        View project on GitHub
    

美化按钮效果

目标伪类选择器“:target”是总舵实用的CSS3特性中的一个，用来匹配文档的URI中某个标志符的目标元素。

目标伪类选择器在IE8及之前版本不被支持，但IE用户点击目录里的链接仍将跳转到相应的标题，只是标题不会高亮显示。（需要兼容IE低版本浏览器，就要用到Jacascript。Suckerfish:target 或者 Improving the usability of within-page links）

页面中有三个区块，默认状态只显示三个区块的标题，点击其中一个标题时，其对应的内容就会显示；点击另一个标题时，对应区块内容将显示，而前一块内容将隐藏。通过:target，显示和隐藏不同栏目的内容，从而实现手风琴效果。

    
    
    
        .accordionMenu{            background: #fff;            color: #424242;            font: 12px Arial,Verdana,sans-serif;            margin: 0 auto;            padding: 10px;            width: 500px;
        }        .accordionMenu h2{            margin: 5px 0;            padding: 0;            position: relative;
        }        .accordionMenu h2:before {    
            border: 5px solid #fff;            border-color: #fff transparent transparent;            content: '';            height: 0;            position: absolute;            right: 10px;            top: 15px;            width: 0;
        }        .accordionMenu h2 a { 
            background: #8f8f8f;            background: -moz-linear-gradient(top, #cecece, #8f8f8f);            background: -webkit-linear-gradient(top, #cecece, #8f8f8f);            background: -o-linear-gradient(top, #cecece, #8f8f8f);            background: linear-gradient(top, #cecece, #8f8f8f);            border-radius: 5px;            color: #424242;            display: block;            font-style: 13px;            font-weight: normal;            margin: 0;            padding: 10px;            text-shadow: 2px 2px 2px #aeaeae;            text-decoration: none;
        }        .accordionMenu :target h2 a,    
        .accordionMenu h2 a:focus,        .accordionMenu h2 a:hover,        .accordionMenu h2 a:active {            background: #2288dd;            background: -moz-linear-gradient(top, #6bb2ff, #2288dd);            background: -webkit-linear-gradient(top, #6bb2ff, #2288dd);            background: -o-linear-gradient(top, #6bb2ff, #2288dd);            background: linear-gradient(top, #6bb2ff, #2288dd);            color: #fff;
        }        .accordionMenu p {    
            margin: 0;            height: 0;    
            overflow: hidden;            padding: 0 10px;            -webkit-transition: height 0.5s ease-in;            -moz-transition: height 0.5s ease-in;            -o-transition: height 0.5s ease-in;            transition: height 0.5s ease-in;
        }        
        .accordionMenu :target p { 
            height: 100px;            overflow: auto;
        }        .accordionMenu :target h2:before {    
            border-color: transparent transparent transparent #fff;
        }    
    
        
            Brand
            
Lorem ipsum dolor...
        
        
            Promotion
            
Lorem ipsum dolor...
        
        
            Event
            
Lorem ipsum dolor...
        
    

手风琴初始效果

手风琴效果

作者：白小虫
链接：https://www.jianshu.com/p/ba4c3e725354