Day14:網頁開發學習之路-CSS Selectors(選擇器)

2022 iThome 鐵人賽

DAY 14

自我挑戰組

網頁開發（html.css）系列第 14 篇

14th鐵人賽

claireyang

2022-09-14 18:44:33

817 瀏覽

分享至

CSS selectors(選擇器)是用來選取要套用CSS樣式的HTML元素的一種語法規則
以下是比較常見的幾種CSS Selectors(選擇器)

Universal selectors(通用選擇器）

套用在全部的元素裡

* {
  color: green;
}

Type selector(標籤選擇器）

套用在指定的元素

/* 全部的 <a> 元素。*/
a {
  color: red;
}

Class selector(類別選擇器）

用以選擇所有符合指定class屬性值的元素

/* 全部元素有 class="spacious" */
.spacious {
  margin: 2em;
}

ID selector (ID選擇器)

用以選擇指定id屬性值的元素。（一個文件中，每個 ID 屬性都是唯一的。)

/* 元素有 id="demo" */
#demo {
  border: red 2px solid;
}

Attribute selectors(屬性選擇器）

舉例：

/*只要是input裡type是text的字就會變成紅色*/
input[type="text]{
      color:red;
      }

Grouping selectors(分組選擇器)

不同元素可以用,隔開，例如：

h1, h2, h3, h4, h5, h6 { font-family: helvetica; }

div,
nav {
font-size: 20px;
}

Descendant selectors(後裔選擇器）

如果你的網頁裡面有二個以上的<a>(假設分別在div、li裡）
若只要對於li裡的<a>元素設定背景顏色，則可以寫成

 <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      li a {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div><a href="https://www.w3schools.com/">w3school</a></div>
    <nav>
      <ul>
        <li><a href="www.google.com.tw">google</a></li>
      </ul>
      <ul>
        <li><a href="www.yahoo.com.tw">yahoo</a></li>
      </ul>
      <ul>
        <li><a href="www.facebook.com.tw">facebook</a></li>
      </ul>
    </nav>
  </body>

selector