iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
1

CSS的選擇器種類非常多,它們到底有哪些功能呢?
剛開始學切版的時候因為實在搞不懂選擇器的用法和功能
所以我的選擇器全部都是使用#ID ... class是什麼?跟ID有什麼差別?
完全不知道哇!

今天就簡單分享一下我目前有在使用的CSS選擇器吧!

全域選擇器

*符號為全域選擇器,他會選取頁面上所有元素

*{
  margin: 0;
  padding: 0;
}

我很喜歡用這個方法移除多餘的margin跟padding
可是這個做法還是盡量不要用比較好...!!

ID選擇器 ID selectors

#符號為ID選擇器,他會選取頁面上相符的ID名稱

#content{
  width: 100px;
}

在網頁中ID名稱是唯一的,僅能使用一次,不能被重複使用

類別選擇器 Class selectors

.符號為類別選擇器,他會選擇頁面上相符的class名稱

.content{
  width: 100px;
  height: 100px;
}

跟id不一樣,class可以不斷地重複使用

類型選擇器、標籤選擇器 Type selectors

用來選擇HTML標籤的選擇器

div{
  width: 100px;
  height: 100px;
}

偽類選擇器、虛擬類別選擇器 Pseudo-classes

偽類可以對指定的選擇器增加特殊的效果
冒號前面為指定的選擇器像是a:hover{hover後的樣式}

:link   //連結平常的樣式
:visited   //連結查閱後的樣式
:hover   //滑鼠滑入的樣式
:active   //滑鼠按下的樣式
:focus   //目標為焦點的樣式
:lang(E)   //當語言為E的樣式
:first-child   //第一個元素的樣式

偽元素選擇器、虛擬元素選擇器 Pseudo-elements

偽元素要使用兩個冒號來表示,雖然用一個冒號也能正常運作
可是為了方便區分,還是使用兩個冒號會比較好!
偽元素也會繼承原本元素的屬性,如果原本屬性的文字是黑色
那麼偽元素的文字也會是黑色的

::before //在原本的元素之前加入內容
::after //在原本的元素之後加入內容

群組選擇器 Group of selectors

同時對一個以上的元素套用樣式就可以這樣使用
假如我想選擇a跟p

a, p{
  color: blue;
}

選擇器有好多好多,目前使用的只有其中的一小部分而已
還有很多沒使用過的選擇器,希望以後有機會可以玩玩看!

學習資料
MIS腳印 記錄 IT 學習的軌跡-CSS 選擇器(Selectors)

w3school


上一篇
Day02::方便又好用的SCSS
下一篇
Day04::Bootstrap學習心得
系列文
三十哩路,我的前端學習路程30

1 則留言

0
TheRoamer
iT邦新手 5 級 ‧ 2017-12-13 06:46:35

漫遊者到此一遊~~~

發現第二個Pseudo的P不見了

另推薦CSS Diner

原來選擇器的小遊戲叫這個名字!
文章內容已經修改了
感謝ヽ(✿゚▽゚)ノ

我要留言

立即登入留言