先上原始碼：
效果圖：
我們開始一步步的編輯這個小頁面
先在body裡寫個無序列表,再加入幾條
在標籤中加入a標籤，像醬嬸兒的： 學
而 這樣 html就寫好了，效果是這樣的：
然後我們開始寫css：
首先設定標籤：
排成一列，去掉列表項的小圓點符號，設定寬高，設定個底邊線，內部水平居中
ul li
然後設定 標籤裡的標籤：
/*display:block 非常重要，意思是讓物件成為「塊級元素」*/
設定為塊級元素，設定字型顏色，寬高，距離頂端位置，距離底端位置，行高（為了讓字型居中）還有最後乙個標籤 取消下劃線
ul li a
現在的效果是這樣的：
然後 設定hover時候的樣式：
ul li a:hover
意思是，當滑鼠停留在對應的標籤位置的時候，重新設定字型大小，a的高度等
然後就是開篇的效果了。
總結一下，hover的效果設定 通俗的來說，就是當你滑鼠停留在標籤上面時，a標籤的樣式在原理樣式的基礎上，根據hover{}做出對應改變，如顏色改變，margin改變等，hover{}中沒有重設的地方依然採取預設的樣式。
HTML5 選擇器續
十 萬用字元選擇器 1 作用 給當前介面所有標籤設定屬性 2 注意點 當介面標籤太多時會影響效能，一般不用 選擇器小練習 charset utf 8 選擇器練習title 1 標籤選擇器 p 2 id identity1 identity2 3 類選擇器 para 4 後代選擇器 divp 5 子元...
html5 新的選擇器
1 queryselector 類似於jq裡的 方法，但是只能取到第乙個元素 只能取到乙個集合，即使只有乙個元素 class li2 li class li2 li ul var oli document.queryselectorall li2 oli取到的是乙個類集合，所以加樣式要用for迴圈 ...
HTML5的高階選擇器
1 層次選擇器 form p 表示後輩 後代選擇器 form p 表示子輩 div p 表示div下乙個相鄰的p元素 div p 表示div後所有匹配的p元素 2 結構偽類選擇器 p first child 第乙個p標籤 p last child 最後乙個p標籤 p nth child 3 第3個p...