CSS 基本類型選擇器

PV:

Tag 元素選擇器

最常用到的基本設定選擇器，想針對哪個 Tag 設定直接把名稱寫出即可。例如以下對 h1 標籤設定文字色彩為紅色，對 p 標籤設定灰色。表示頁面中所有的 h1 跟 p 都會變色。

1
2
3
4
5
6
h1 {
  color: red;
}
p {
  color: grey;
}

例如用在 CSS reset ，利用選擇器把網頁瀏覽器的差異設定到一致外觀

1
2
3
4
5
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

或用在統一網站視覺外觀

1
2
3
h1 {
  font-size: 20px;
}

CSS 類別選擇器

切版與前端框架最常使用的 CSS 選擇器。 class 選取器是由 . 作為開頭。
名稱規則：

  • 可使用英文
  • 名稱第一個字可以是「 - 」 中線 (dash)
  • 名稱第一個字可以是「 __ 」 底線 (underline)
  • 名稱區分大小寫，相同名稱但大小寫不同，是選取不同物件
  • 除上面符號，其他符號都無效
  • 名稱第一個字不能是數字
1
2
3
4
5
6
7
8
9
10
11
12
.logo {
  ...;
}
.login-form {
  ...;
}
.shopping_list {
  ...;
}
.-this_class--so__ugly {
  ...;
}

ID 選擇器

ID 選擇器的優先權是 Tag、Class、ID 裡最高的。但是可能造成未來要修改覆寫時程式碼變髒
以下面為例，三個選取器都能選到目標對象 div，但只會有一種色彩呈顯。瀏覽器會採取 CSS 優先權選擇要顯示的色彩。
底下範例會顯示的色彩是 blue

1
<div id="myName" class="teacher"></div>
1
2
3
4
5
6
7
8
9
.div {
  color: green;
}
#myName {
  color: blue;
}
.teacher {
  color: red;
}

群組式宣告

將 2 個不同的 class 名稱使用半形逗號 「,」區隔開，讓不同區塊但是有同樣視覺外觀的對象共用一份 CSS 設定，也節省原始碼。

1
2
3
4
5
6
7
8
9
10
11
<div class="news-list">
  <a href="" class="news-list-item"></a>
  <a href="" class="news-list-item"></a>
  <a href="" class="news-list-item"></a>
</div>

<div class="event-list">
  <a href="" class="event-list-item"></a>
  <a href="" class="event-list-item"></a>
  <a href="" class="event-list-item"></a>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.news-list,
.event-list {
  border: 1px solid #ccc;
  padding: 20px;
}

.news-list-item,
.event-list-item {
  color: #666;
  text-decoration: none;
  display: list-item;
  list-style: none;
}

群組式宣告重點

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*每個逗號右邊添加一個空格方便閱讀*/
/*每個選取器可寫在同一行縮減檔案大小*/
.news-title, .event-title{
  ....
}

/*沒縮減檔案大小需求時，可把每個選取器換行讓開發容易識別*/
.news-title,
.event-title{
  ....
}

/*大量使用逗號區隔眾多選取器時，應該另外建立新的共用選取器，避免濫用群組宣告*/
.news-title, .event-title, .product-title, .service-title, .media-title {
  border: 1px solid #ccc;
  padding: 20px;=
}

群組式宣告實務應用

相同視覺外觀的項目，把共用 / 共同的地方抽出獨立用一個 class 設定。差異化的地方各自用專有的 class 名稱設定即可。利用共用的 class 名稱，可以快速將想要的設定一次完成，而且不用用到群組式宣告，較容易修改又能保留變化的彈性。

1
2
3
4
5
6
7
8
9
10
11
<div class="list news-list">
  <a href="" class="news-list-item"></a>
  <a href="" class="news-list-item"></a>
  <a href="" class="news-list-item"></a>
</div>

<div class=" list event-list">
  <a href="" class="event-list-item"></a>
  <a href="" class="event-list-item"></a>
  <a href="" class="event-list-item"></a>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.list {
  border: 1px solid #ccc;
}

.list0item {
  font-size: 18px;
}

.news-list-item {
  background: url(news-icon.png);
}

.event-list-item {
  background: url(event-icon.png);
}

組合式宣告

組合式宣告是把多個選取方式合起來一起寫的作法。把同一個對象用它具備的多個選取器選取的時候，不能有空格。這種選取方式是一種條件式，同時符合這幾個條件的物件才會被選取到。

例如底下我要選取 a 標籤而且有 btn 這個 class，只選 a 標籤會選到第二個超連結，如果只用 .btn 又會選到其他不需要的對象。這時就適合用組合式宣告，利用 a.btn 就能選取到目標對像。

1
2
3
4
<input type="button" class="btn" value="詳細內容" />
<input type="button" value="詳細內容" />
<a href="" class="btn">詳細內容</a>
<button class="btn">詳細內容</button>
1
2
3
a.btn {
  ...;
}

組合式宣告實務應用

希望超連結跟按鈕的外觀不一樣，但是它們的尺寸佔位要相同

1
<button class="btn">放入願望清單</button> <a href="" class="btn">放入購物車</a>
1
2
3
4
5
6
7
8
9
10
11
12
.btn {
  display: inline-block;
  border: 1px solid black;
  background-color: #eee;
  padding: 0 1em;
  line-height: 1.5em;
}

a.btn {
  background-color: transparent;
  border-color: transparent;
}

凸顯作用中的項目。選取同時擁有 .list-item 及 .active 的物件 (通常用在選單、標籤面板或幻燈片下方圓點)

1
2
3
4
5
<ul>
  <li class="list-item active"></li>
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>
1
2
3
.list-item.active {
  ...;
}

層疊式宣告

即後代選取器，只要是物件 A 的後代而且是 B 物件，就可以被選到。比起群組式宣告，層疊式宣告利用不同父層設定子層可讓 HTML 原始碼更加彈性且乾淨。這裡搭配群組式宣告與組合式宣告，就可以更靈活選取目標。

1
2
3
4
5
6
 <div class="news">
   <h1>abc</h1>
 </div>
 <div class="hot">
  <h1>morriz</h1>
</div
1
2
3
4
5
6
7
8
9
10
11
h1 {
  font-size: 35px;
}

.news h1 {
  color: red;
}

.hot h1 {
  color: pink;
}

層疊式宣告問題

層疊式宣告雖然可保持原始碼乾淨，但卻可能讓 CSS 原始碼變得累贅且效能低落。瀏覽器對 CSS 的選取方式，如果是 .news ul li a 這一串選取器的選取流程，是從右到左，瀏覽器會先選取 a 標籤然後再比對父層，最後比對最上層父層是不是 .news。只要有一個不符合所寫的層疊結構，就會導致無效。

為什麼瀏覽器是從右到左比對 CSS 選擇器？

1
2
3
4
5
6
7
8
<section class="news">
  <h2>最新消息</h2>
  <ul>
    <li>
      <a></a>
    </li>
  </ul>
</section>
1
2
3
4
5
6
7
8
9
.news ul li,
.event ul li {
  ...;
}

.news ul li a,
.event ul li a {
  ...;
}

以下是減少層次的層疊選取器寫法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<section class="section news">
  <h2 class="section-title">最新消息</h2>
  <ul class="list">
    <li class="list-item">
      <a href="#" class="list-item-link"></a>
    </li>
  </ul>
</section>
<section class="section events">
  <h2 class="section-title">近期活動</h2>
  <ul class="list">
    <li class="list-item">
      <a href="#" class="list-item-link"></a>
    </li>
  </ul>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.section{
共用設定
}
.section .section-title{
共用設定
}

.section .section-list{
共用設定
}

.section .list-item{
共用設定}

.section .list-item-link{
共用設定}

.news .list-item-link{
差異設定}

選取擁有特定屬性的物件

添加 alt 屬性可讓爬重知道圖片內容，增加 SEO 分數。以下如果沒有添加 alt 屬性就呈現邊框，方便找出哪些圖片沒有添加 alt 屬性。

1
2
3
<img src="" alt="david照片" />
<img src="" alt="wong照片" />
<img src="" alt="" />
1
2
3
4
5
6
7
img {
  border: 1px solid red;
}

img[alt] {
  border: none;
}

選取屬性值完全等於特定文字的物件

寫法 [屬性="值"]，可選到特定 alt 值的物件，但只要內容有一個不一樣，例如 <img src="" alt="david的照片">，就會選不到。

1
2
3
<img src="" alt="david照片" />
<img src="" alt="wong照片" />
<img src="" alt="" />
1
2
3
img[alt="david照片"] {
  display: none;
}

選取屬性值開頭等於特定文字的物件

屬性寫法[屬性^＝'值']，當 HTML 裡有特定的字串起始的時候，就可利用此選取器選取。只要開頭有 david 的圖片都會消失

1
2
3
<img src="" alt="david照片" />
<img src="" alt="wong照片" />
<img src="" alt="david太太" />
1
2
3
img[alt^="david"] {
  display: none;
}

選取屬性值結尾等於特定文字的物件

屬性寫法[屬性$＝'值']，當 HTML 裡有特定的字串結尾的時候，就可利用此選取器選取。在選取器多加一個 i ，可讓選取器不分大小寫都能選到

1
2
3
4
5
6
<h2>資源下載</h2>
<div class="download">
  <a href="logo.PNG">logo</a>
  <a href="intro.pdf">article</a>
  <a href="resume.docx">resume</a>
</div>
1
2
3
4
5
6
7
8
9
10
a[href$=".png" i] {
  ...;
}

a[href$=".pdf" i] {
  ...;
}
a[href$=".docx" i] {
  ...;
}

選取屬性值包含特定文字的物件

寫法 [屬性*="值"]，寫法意思是「圖片的 alt 屬性值中必須同時包括 david 和照片」這兩個關鍵字，就會被同時消失。與 「css 選取器的組合式」宣告概念相同，選取器中沒有空格，而且物件同時具備選取器設定條件，就會被選取

1
2
3
<img src="" alt="david照片" />
<img src="" alt="wong照片" />
<img src="" alt="david" />
1
2
3
img[alt*="david"][alt*="照片"] {
  display: none;
}

選取屬性值包含特定單字的物件

寫法 [屬性～="值"]，寫法意思是「屬性中有指定的單字」主要是針對中文以外的羅馬文字。以下選到的會是圖片 1,3 共 2 張圖片

1
2
3
4
<img src="https://picsum.photos/200/300" alt="david is old" />
<img src="https://picsum.photos/200/400" alt="alvin" />
<img src="https://picsum.photos/200/100" alt="david is p" />
<img src="https://picsum.photos/200/300" alt="davidisp" />
1
2
3
img[alt~="david"] {
  display: none;
}

選取屬性值等於特定文字或包括-的物件

寫法 [屬性｜="值"]，可以選取到文字後面帶有連接號 -
的物件

1
2
3
4
<img src="https://picsum.photos/200/300" alt="david is old" />
<img src="https://picsum.photos/200/400" alt="alvin" />
<img src="https://picsum.photos/200/100" alt="david-professor is p" />
<img src="https://picsum.photos/200/300" alt="davidisp" />
1
2
3
img[alt|="david"] {
        display: none;
      }

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2020 CYC'S BLOG All Rights Reserved.

UV : | PV :