跳至主要内容

[掘竅] 小技巧 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;
}
}

參考