CSS selector

説明

CSS Selector,用在撰寫CSS文件上的選擇器,
但是同樣也用於JavaScript的querySelector / querySelectorAll。

Greater than selector

CSS【>】選擇器:用來選擇直系子元素
※不是直接的子元素無法被選到

.parent
 p 這是parent下的直接子元素
 .mid
  p 這是parent下面的mid裡面的子元素(非parent直接子元素)
.parent > p
 color: #68cccc

Display

這是parent下的直接子元素

這是parent下面的mid裡面的子元素(非parent直接子元素)
————————————————–

第一行文字是 parent 下面直接的子元素,所以被 > 選到,改變顏色;
第二行字為 parent 下面間接的子元素,無法被 > 選到,維持原本顏色
※用空格選擇器則兩種情況都能被選到

Attribution Selector

指定的attr條件用[]包住

  1. 傳統選擇法:attr[]裡面的雙引號”要加反斜線抵銷(或是裡面的雙引號改使用單引號)
  2. ES6選擇法:整個querySelector用反引號`代替雙引號”包住,所以裡面的雙引號”不用加反斜線抵銷
.box(data-color="red") A
br
.box(data-color="white") B
.box
 width: 10px
 height: 10px
 border: 1px solid #000
 text-align: center
 padding: 100px
 
.red
 background-color: #f78e79
//傳統選擇法:裡面的雙引號"要加反斜線\抵銷
var redBox=document.querySelector(".box[data-color=\"red\"]");
//ES6選擇法:用反引號`代替雙引號"包住,所以裡面的雙引號"不用加反斜線\抵銷
var redBox=document.querySelector(`.box[data-color="red"]`);

redBox.classList.add("red");

Display

A

 

B

multiple selector

多重條件選擇器。

原理同CSS的多重條件選擇器,不留空白,直接在A條件後面加上B條件

.classA classA
.classB classB
.classA.classB classA and B
div(data-attrA="A") attrA
div(data-attaB="B") attrB
div(data-attrA="A",data-attrB="B") attrA and B
document.querySelector(".classA.classB");
//"<div class='classA classB'>classA and B</code></div>"

document.querySelector("div[data-attrA][data-attrB]")
//"<div data-attra='A' data-attrb='B'>attrA and B</div>"

not selector

指定不要選到包含某class / attr / element的元素

.apple apple A
.apple apple B
.apple apple C
.apple.banana apple D
const AllApple=document.querySelectorAll(".apple");
//▶︎(4) [div.apple, div.apple, div.apple, div.apple.banana]

const PureApple=document.querySelectorAll(".apple:not(.banana)");
//▶︎(3) [div.apple, div.apple, div.apple]
//全選所有.apple,然後去掉有包含.banana的,所以只有選到3個element

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *