CSS偽類與偽元素

偽元素 (pseudo element) 和偽類 (pseudo class) 差在哪

有時候 CSS 裡會出現單冒號 : 跟雙冒號 :: 的符號，
單冒號開頭的是偽類 (pseudo class) ，
雙冒號開頭的是偽元素 (pseudo element) 。

一般常見的偽類有:

動態：:link、:hover、:active、:focus、:visited
元素狀態：:disabled、:enabled、:checked
結構：:root、:nth-child、:nth-last-child、:nth-of-type、:nth-last-of-type、:first-child、:last-child、:first-of-type、:last-of-type、:only-child、:only-of-type、:empty

偽元素有:

::first-line：選取第一行
::first-letter：選取第一個字
::before：從選取元素的前面加入元素
::after：從選取元素的後面加入元素
::selection：選取文字反白後

ps.現在單一冒號 : 也可以代表偽元素，但要注意瀏覽器是否支援。

補充

SCSS 的 & 符號

是scss的語法，代表上一層選擇器(元素)

有時會看到類似寫法

Code

.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

其實上面寫法等同於

Code

.bordered.float {
  float: left; 
}
.bordered .top {
  margin: 5px;
}

.bordered.float 是串聯選擇器，作用在同一標籤上
.bordered .top 是後代選擇器，作用在不同標籤上

有時 CSS 中有定義一些 pseudo-classes (或稱偽類、準類別)，被使用來為元素增加一些特效，如 :hover, :link, :visited, :before, :after 等這些以冒號(:)開頭的類別名稱。例如把滑鼠移到某個網頁連結時，連結會變色的 CSS 語法：

Code

a {
  font-weight: bold;
  text-decoration: none;
}
a :hover {
  color:#FF00FF;
}

上述其實還是一種巢狀的結構，只是都作用到同一個元素(例如範例的 a 元素)上。這樣情況就能夠用對 :hover 使用 ＆ 符號來代表其作用的父選取器，所以上述的 CSS 範例的 Sass 就可以寫成：

Code

a {
  font-weight: bold;
  text-decoration: none;
  &:hover {
    color:#FF00FF;
  }
}

參考來源：
oxxostudioCSS 偽類 child 和 of-type