3.html&css实验3.css选择器

主要是熟悉CSS选择器的运用，用到的CSS代码如下：

<style type="text/css">
span{color:green;} <!-- 选择span-->
p em{color:blue;}<!-- 选择p em-->
.b{font-style:italic;}<!-- 类选择器，斜体-->
em{font-style:normal;}<!-- -->
p em{font-size:larger;}<!-- -->
#c{text-decoration:underline;} <!-- id选择器 -->
</style>

<style type="text/css">
li.first~ul>li{font-size:larger;} <!-- li中的first类 后续兄弟元素中的ul元素，中的子女元素中的li元素。。。很绕吧- -！。。-->
ul#first>li.first+li+li,#last{font-weight:bold;}
<!-- （ul标签中id是first的 子女元素中 为first类的li元素中，下一个的下一个之后的所有兄弟li元素） 或者 id是last的 -->
li.first~ul>li{color:green}<!-- 类名为first的li元素 的后续兄弟ul元素 的子女li元素-->
#last{font-style:italic}<!-- id为last -->
ul#first>li.first~li~li~li{color:blue} <!-- id为first的ul标签 的类名为first的子女li元素 中的后续兄弟 的后续 的后续li -->
</style>

<style type="text/css">
em{font-weight:bolder;} <!--标签选择器 -->
em{color:blue;}
b+span{color:brown;}<!-- b标签 的相邻兄弟span元素 -->
em+span{color:red;}<!-- em标签 的相邻兄弟span元素-->
em+span+span{color:green;}<!-- em 的相邻span兄弟 的 相邻span兄弟 -->
b~b~b{text-decoration:underline;}<!-- b 的后续b兄弟 的后续b兄弟-->
</style>

<style type="text/css">
[title="小毛驴"],[title="小兔子乖乖"],[title="小花猫"],[title="小麻雀爱说话"],[title="小花猫莫骄傲"]{color:red}
<!-- title属性等于“**”的-->
[title="打工爸爸"],[title="好爸爸坏爸爸"]{color:green}
[title="我会听话"],[title="爸妈听我说"]{font-style:italic}
</style>

<!-- 类似的，还有img[alt^="fig"] { width:20px; } 选择alt值以“ figure”开头的所有img元素。
img[alt$="2-1"] { width:20px; } 选择alt值以“ 2-1” 结尾的所有img元素。
img[alt*="5-"] { width:20px; } 选择alt值包含字符串“ 5-”的所有img元素。
img[alt~="fig"] { width:20px; } 选择alt值包含单词“ fig” 的所有img元素。 -->