跳至主要内容

[掘竅] 小技巧 CSS Tips

目錄​

[TOC]

避免按鈕被 Focus​

使用 JavaScript 的 click 事件：

const button = document.querySelector('button');
button.addEventListener('click', (e) => e.target.blur());

Pseudo-classes​

child：parents 底下的第幾個​

keywords: :first-child, :last-child, :nth-child(), :nth-last-child(), :only-child​

使用這幾個選擇器時，實際上是先看 first-child, last-child, 或 n 這個元素，接著才來看它符不符合所選擇的 tag 或 class。

舉例來說：

<!-- 先看 div 裡的 last-child，在看是不是 <p> -->
<div>
  <p>
    Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries
    for previewing layouts and visual mockups.
  </p>
  <p>
    Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries
    for previewing layouts and visual mockups.
  </p>
</div>

<div>
  <p>
    Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries
    for previewing layouts and visual mockups.
  </p>
  <h4>
    Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries
    for previewing layouts and visual mockups.
  </h4>
</div>
/**
 * 先看 div 裡的 last-child ，接著，如果是 <p> ，才套用
**/
div p:last-child {
  background-color: steelblue;
}

/**
 * 先看 div 裡所有 last child ，接著，因為沒有額外條件，表示全選（＊）
 * 所以全部的 <div> 中的 last-child 都會套用
**/
div :last-child {
  background-color: steelblue;
}

/**
 * 如果使用的是 nth-of-type ，則是會選取 <div> 當中的最後一個 <p>
**/
div p:last-of-type {
  background-color: steelblue;
}

type：siblings 中的第幾個（要看的是 tag）​

keywords: first-of-type, last-of-type, :nth-last-of-type(), :nth-of-type(), :only-of-type​

nth-child-selector @ CodePen demo @ JSFiddle

:nth-of-type 的 : 前面如果帶的是 class，則要看的是被選到的那個 class 的「tag name」是什麼，例如，.a:nth-of-type(1) 要看的是 .a 這個 element 的 tag name 是什麼，nth-of-type 的 type 是取決於這個 tag name。

範例一​

<div>
  <div class="c">first</div>
  <p class="b">second</p>
  <p class="b">third</p>
  <p class="b">fourth</p>
</div>
// 在所有被選到的 .b 裡面，同時又是 siblings 中的第二個 <p>
// => second
.b:nth-of-type(1) {
  border: 5px solid black;
}

// 在所有被選到的 .b 裡面，同時又是 parents 底下的第二個 child
// => second
.b:nth-child(2) {
  border: 5px solid black;
}

// 這樣會找不到，因為在所有被選到的 .b 中，沒有同時又是 parents 底下的第一個 child
// （因為 parent 底下第一個 child 是 .c
.b:nth-child(1) {
  border: 5px solid black;
}

範例二​

<div class="parent">
  <p class="b">first</p>
  <p class="a">second</p>
  <p class="a">third</p>
</div>
.parent {
  // 在所有選到的 .a 中，同時又是 siblings 中的第二個 p
  // => second
  .a:nth-of-type(2) {
    background-color: blue;
  }

  // 在所有選到的 .a 中，同時又是 parents 底下的第二個 child
  // => second
  .a:nth-child(2) {
    background-color: blue;
  }

  // 這樣會找不到，因為在所有選到的 .a 中，沒有同時又是 parents 底下的第一個 child
  .a:nth-child(1) {
    background-color: blue;
  }

  // 這樣會找不到，因為在所有選到的 .a 中，沒有同時又是 siblings 中第一個 p
  .a:nth-of-type(1) {
    background-color: blue;
  }
}

範例三： parent 底下，選擇第一個是 .a 的 class​

<div class="parent">
  <p class="b">first</p>
  <p class="a">second</p>
  <p class="a">third</p>
</div>
.parent {
  // 在所有被選到的 p，且是 parent 底下的第一個有 .a 的 child
  // => second
  p:nth-child(1 of .a) {
    background-color: yellow;
  }
}

上面的語法比較新，如果瀏覽器不支援的話，可以考慮改成：

.parent {
  // parent 底下，第一個是 .a 的 class
  // => second
  .a:not(.a ~ .a) {
    background-color: yellow;
  }
}

參考​