* {.....}
星號選擇器會選取頁面上所有的元素。 
#container * {.....}
這樣會選取 id="container" 的所有子對象。
如果可能的話，盡可能不要使用這兩個方法。

#container {.....}
#(id)選擇器是唯一的，不允許網頁中出現同名(id)選擇器

.container {.....}
.(class)選擇器，允許網頁中同名的(class)選擇器多次出現或與(id)選擇器同時使用於同一元素

a {.....}
ul {.....}
input {.....}
前面不加任何符號的是標籤選擇器，會套用樣式於所有符合的HTML標籤

li a {.....}
這個是子對象選擇器，會選取所有li標籤底下的所有連結

a:link {.....}
a:visted {.....}
使用 :link 偽類來選擇所有還沒有點擊過的超連結標籤
使用 :visited 偽類來選擇所有已經被點擊過的超連結標籤

ul + p {.....}
相鄰兄弟選擇器，只選擇與UL同級且相鄰的第一個P標籤

div.demo ~ p {.....}
和相鄰兄弟選擇器非常相似，他會選擇與ID為demo的DIV標籤同級且相鄰的所有P標籤

div#container > ul {.....}
選擇ID為container的DIV標籤內的UL元素

a[title] {.....}
屬性選擇器 ，設定a標籤內含有title屬性的樣式

a[href="https://www.we-shop.net"] {.....}
屬性選擇器 ，設定a標籤內屬性href的值為https://www.we-shop.net的樣式

a[href*="shop"] {.....}
模糊屬性選擇器 ，設定只要a標籤內屬性href的值包含shop即可套用樣式

a[href^="http"] {.....}
開頭屬性選擇器 ，設定只要a標籤內屬性href的值開頭為http即可套用樣式

a[href$=".jpg"] {.....}
尾部屬性選擇器 ，設定只要a標籤內屬性href的值尾部為.jpg即可套用樣式

a[data-*="image"] {.....}
自訂屬性選擇器 ，設定只要a標籤內自訂屬性的值包含image即可套用樣式

h1,h2,h3,h4,h5,h6 {.....}
同時設定多個元素，用半形逗號分隔

input[type=radio]:checked, input[type=checkbox]:checked {.....}
偽類選擇器，用來選擇已被選取的單選框或複選框

.demo:before {content : "";}
.demo:after {content : "...";}
偽類選擇器，指定的元素前(before)後(after)添加內容

a:hover {border-bottom : 1px solid black ;}
border-bottom: 1px solid black;比 text-decoration: underline;兼容性更好

div:not(#container) {.....}
偽類選擇器，選擇除了id是container的所有的div標籤

p::first-line {.....}第一行
p::first-letter {.....}第一個字
偽元素選擇器，給每個段落的第一行或第一個字添加樣式

li:nth-last-child(2) {.....}
給倒數第2個li元素添加樣式

ul:nth-of-type(3) {.....}
給第3個ul元素添加樣式(包含內部li)

ul:nth-last-of-type(2) {.....}
給倒數第2個ul元素添加樣式(包含內部li)

ul li:first-child {.....}
給每個ul裡的第1個li元素添加樣式

ul li:last-child {.....}
給每個ul裡的最後一個li元素添加樣式

ul li:last-child {.....}
給每個ul裡的最後一個li元素添加樣式

div p:only-child {.....}
給只包含1個p元素的div標籤添加樣式，多餘1個則被忽略

li:only-of-type {....}
給只包含1個li標籤的父元素添加樣式，多餘1個則被忽略

li:only-of-type {....}
給只包含1個li標籤的父元素添加樣式，多餘1個則被忽略

li:first-of-type {color: red;}
給包含多個li標籤的第一個相同li標籤的父元素添加樣式
<div>
    <p> My paragraph here. </p>
    <ul>
       <li> List Item 1 </li>
       <li> List Item 2 </li>
    </ul>
 
    <ul>
       <li> List Item 3 </li>
       <li> List Item 4 </li>
    </ul>  
</div>
使用上面的代碼會選擇 List Item 1 和 List Item 3，那怎樣才能選到 List Item 2 呢? 點擊圖片可以放大檢視