CSS 選擇器

萬用: * 代表此網頁都要用此設定

* {
    font-size: 26px;
}

標籤: HTML 標籤

h1 {
    color: #eee;
}
label {
    color: #333333;
}

Class: 使用 . 符號代表 class

<style>
.some-class {
    color: red;
}
</style>
<p class="some-class">這裡是紅色文字</p>

ID: 使用 # 符號代表 ID

<style>
#some-id {
    color: blue;
}
</style>
<p id="some-id">這裡是藍色文字</p>

屬性: 使用 [] 符號針對標籤內的屬性控制

<style>
p {
    color: black;
}
[data="title"] {
    color: red;
}
p[data^="prefix"] {
    color: blue;
}
p[data~="hi"] {
    color: pink;
}
p[data*="all"] {
    color: green;
}
p[data$="pdf"] {
    color: yellow;
}
</style>
<p>我是黑色</p>
<p data="title">我是紅色</p>
<p data="prefix-xxx">我是藍色</p>
<p data="hi pink">我是粉紅色</p>
<p data="hi-all">我是綠色</p>
<p data="example.pdf">我是黃色</p>

後代: 使用 space 符號匹配所有包圍住的選擇器

<style>
  div p {
    color: red;
  }
</style>
<p>我是黑色</p>
<div>
  <p>我是紅色</p>
  <section>
    <p>我是紅色</p>
  </section>
</div>

子代: 使用 > 符號匹配第一層父子關係的選擇器

<style>
  div>p {
    color: red;
  }
</style>
<p>我是黑色</p>
<div>
  <p>我是紅色</p>
  <section>
    <p>我是黑色</p>
  </section>
</div>

相鄰: 使用 + 符號匹配相鄰的第一個元素， ~ 符號則是匹配相鄰的任何元素

<style>
  div + p {
    color: red;
  }

  div ~ h1 {
    color: green;
  }
</style>
<p>我是黑色</p>
<div>
</div>
<p>我是紅色</p>
<p>我是黑色</p>
<p>我是黑色</p>
<h1>我是綠色</h1>

偽類: 使用 : 定義元素的特殊狀態 All CSS Pseudo Classes

<style>
  a:hover {
    color: green;
    font-size: 16px;
  }
  input:checked {
    height: 50px;
    width: 50px;
  }
</style>
<a href="">This is test a element.</a>
<input type="checkbox">

偽元素: 使用 :: CSS3 Guildline 為了區分偽類跟偽元素，使用兩個冒號作為區隔。

.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;
  border-radius: 10px;
  background: linear-gradient(top, #f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles::after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f3961c transparent;
}
</style>
<p class="triangle-isosceles">對話框</p>