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元素。  -->