CSS的高级选择器

                                                                        层次选择器

1.后代选择器：两个选择符之间必须要以空格隔开。

例如： ul li{

color:red;

}

2.子选择器：

li > p{

color:red;

}

3.相邻兄弟选择器：

选择器active相邻的下一个li的背景变色

例如：.active + li{

background:red;

}

4.通用兄弟选择器

类选择器active下面所有的li都会变成红色

.active ~ li{background:red;

border:1px solid red;

}

                                                                       属性选择器

1.E[attr] 选择匹配具有属性attr的E元素

[]表示属性的意思 里面写具体属性的名称比如 [id]

例如： li [id] {

            background:red;

        }

<li id>我爱南京</li>

<li>我爱南京</li>

加了id的li背景才会变红

2. E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中

例如：

dd[class=two]{

            background: red;

        }

<li class="one">我是定义列表1</li>

 <li class="two">我是定义列表2</li>

dd元素中class值是two的背景才会变红色

3.选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

 例如：li[class*=b]{

            color:red;

        }

<p class="abc">111</p>

<p class="bbb">222</p>

 <p class="ccc">333</p>

那么class值有b的颜色都会变红色

3.属性href是以http开头的a元素 背景色变成红色

例如：

a[href^='http://']{

            background:red;

        }

<a href="http://www.baidu.com">跳转百度</a>

<a href="www.baidu.com">不能跳百度</a>

那么只有值开头带有http：//的背景才会变成红色

4.属性href是以.ccc常、结尾的a元素 背景色变成红色

例如：

a[href$=".ccc"]{

            color:red; }

<a href="http://www.baidu.com">能跳百度</a>

<a href="http://www.baidu.ccc">不能跳转百度</a>

那么只有值是以.ccc结尾的a元素 背景才能变成红色