BenzHub | CSS Basic Selector(基礎的CSS選擇器)

常見的 CSS 選擇器的使用方式

範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基本的CSS選擇器</title>
    <style>
      /* 元素選擇器 */
      body {
        background-color: #333;
      }

      /* #是ID選擇器 */
      #about {
        background-color: #ffffff;
      }

      #welcome {
        background-color: #f4f4f4;
      }
      /* .是類(class)選擇器 */
      .primary-heading {
        color: green;
      }
      /* 多項選擇器 */
      #welcome,
      #about {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 5px;
      }
      /* 嵌套選擇器 */
      #welcome p {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div id="welcome">
      <h2 class="primary-heading">歡迎來到我的blog</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat
        quaerat labore assumenda voluptatem dolorem qui corporis tempora, minus
        velit praesentium est. Unde fugit at temporibus cupiditate adipisci
        voluptates enim nesciunt!
      </p>
    </div>
    <div id="about">
      <h2>關於我們</h2>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni minus
        nostrum rerum, qui doloremque quam quia optio numquam, vitae, itaque
        exercitationem quas dolore eius aspernatur quis doloribus voluptatum
        ducimus perferendis?
      </p>
    </div>
  </body>
</html>

屬性選擇器

屬性選擇器詳細介紹

範例

/* 存在 title 屬性的 <a> 標籤 */
a[title] {
  color: orange;
}

/* 存在 href 屬性且屬性值符合"https://example.org"的 <a> 標籤 */
a[href="https://example.org"]
{
  color: blue;
}

/* 存在 href 屬性且屬性值包含"example"的 <a> 標籤 */
a[href*="example"] {
  font-size: 1.5em;
}

/* 存在 href 屬性且屬性值結尾是".org"的 <a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在 class 屬性且屬性值包含單字"logo"的<a>元素 */
a[class~="logo"] {
  padding: 5px;
}

直屬選擇器 A > B

選擇屬於“test“ class的無序列表ul 標籤的直接子列表li 標籤

ul.test > li {
  margin: 2em;
}

鄰接同層選擇器 A + B

h2 標籤後面緊跟著的p 標籤將被選中

h2 + p {
  color: white;
}

通用同層選擇器 A ~ B

在img 標籤之後所有的p 標籤(需要有相同父級元素)

img ~ p {
  font-size: 2rem;
}

CSS Basic Selector(基礎的CSS選擇器) | CSS

基本選擇器

複合選擇器

範例

範例

屬性選擇器

範例