主要是熟悉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元素。  -->