css选择器(2)——属性选择器和基于元素结构关系的选择器

在有些标记语言中，不能使用类名和id选择器，于是css2引入了属性选择器。

3.属性选择器

　　a)根据是否存在该属性来选择

　　　　如果希望选择有某个属性的元素，例如要选择有class属性的所有h1元素，使其文本为银色，可以这样写：

/*根据单个属性来选择*/
h1[class]{

    color:sliver;

}
/*还可以根据多个属性来选择*/
h1[class][id]{
　　color:yellow;
}

　　b)根据具体属性值来选择　

　　<style>

　　　　/*也可以利用多个属性值来选择,第二段变成了红色*/

　　　　p[class='one'][alt='two']{
　　　　　　color:red;
　　　　}
　　</style>
　　<body>
　　　　<p class='one'>一个class属性</p>
　　　　<p class='one' alt='two'>一个class属性加上一个alt属性</p>
　　</body>

　　c)根据部分属性值来选择

　　~=：如果属性能够接受词列表，可以根据其中的任意一个词进行选择。

　　*=word1：选择属性值中包含word1的所有元素

　　^=start：选择属性值中以start开头的所有元素

　　$=end：选择属性值中以end结尾的所有元素

<style>

    p[class~='bar']{

        color:red;

    }

    p[class*='wo']{

        color:blue;

    }

    p[class^='th']{

        color:yellow;

    }

    p[class$='ur']{

        color:purple;

    }

</style>

<body>

        <p class='one bar'>one</p><!--红色-->

        <p class='one bard'>与上一段作为对比</p><!--默认颜色-->

        <p class='two ok'>two</p><!--蓝色-->

        <p class='three'>three</p><!--黄色-->

        <p class='four'>four</p><!--紫色-->

</body>

　　d)特定属性选择器

　　　　直接看例子：

/*选择src属性等于figure或者以figure-开头的元素*/

img[src|='figure']{

    border:1px;

}

4.基于文档结构的选择器

　　a)后代选择器——使用空格分隔：

　　　　选择h1中的所有em元素：

h1 em{

    color:gray;

}
/*当然并不限于两个选择器，例如：*/
/*将p标签下的所有span标签下的所有em元素的文本颜色设置为灰色*/
p span em{
　　color:em
}

　　b)子元素选择器——使用>号分隔

　　　选择h1的子元素而不是后代元素

<style>

    h1 > em{

        color:red;

    }

</style>

<body>

        <h1>sjfsl<span><em>不会被选择到</em></span><em>会被选择到</em></h1>

</body>

　　c)相邻兄弟（不能是堂兄弟，即拥有相同的父元素）选择器——使用＋号分隔　

<style>

    p + h1{

        color:red;

    }

</style>

<body>

    <p>第一段</p>

    <h1>第二段</h1><!--颜色变红-->

    <h1>第三段</h1><!--颜色不变-->

</body>

巴特西