選擇器 · 編程開發筆記

## :-: 不常用 ``` ---------- 不太常用 ---------- 選中div下一個兄弟元素節點p、 div + p { background: red; } 選中div下面所有為p的兄弟元素節點p，并列結構下、 div ~ p { background: red; } 選中屬性值包含a(兩邊有單詞邊界)的元素、 div[data~="a"] { background: red; } 選中 a 開頭，或者 a- 開頭的元素、 div[data|="a"] { background: red; } 選中以a開頭的元素、 div[data^="a"] { background: red; } 選中以a結尾的元素、 div[data$="a"] { background: red; } 選中只要包含a的任意元素、 div[data*="a"] { background: red; } ---> 兼容性差、改變input提示顏色、 input::placeholder { color: red; } 改變字體文本選中后的樣式、 div::selection { 只能設置三個樣式 color: red; background-color: red; text-shadow: red; -- 陰影 } ``` ``` ----------> 偽類選擇器、(被選中元素的一種狀態) E:not(s) 選中除了最后一個 :last-of-type 的所有li元素、 ul li:not(:last-of-type) { border-bottom: 1px solid red; } 選中跟標簽、相當于html 絕對最父級、 :root{ background-color:red; } 被錨點觸發的狀態樣式、<a href="#div">點擊后</a> div:target{ color: red; } li --> 選中同級下·第一個 ul > li:first-child {} li --> 選中同級下·最后一個 ul > li:last-child {} 選中ul里面只有單獨一個的li (獨生子) ul > li:only-child { color: red; } 選中指定的li、(css索引從1開始) ul > li:nth-child(3) { color: red; } 選中奇數的li、(css索引從1開始、但n是自然數，它是從0開始的) 或者 :nth-child(add) ul > li:nth-child(2n+1) { color: red; } 選中偶數的li、或者 :nth-child(even) ul > li:nth-child(2n) { color: red; } 倒過來，選中最后一個、 ul > li:nth-last-child(1) { color: red; } ---------- 以上都考慮其他元素，對它的影響、比如說選中第一個 li:nth-child(1) 但同級元素下第一個實際為span標簽、那么不會選到、 ``` ## :-: 較常用 ``` ----------> 比較常用該類型 li 的第一個、 ul > li:first-of-type{ color: red; } 該類型 li 的最后一個、 ul > li:last-of-type{ color: red; } 該類型 li 在同級下只有一個時選中、(獨生子、特有) ul > li:only-of-type{ color: red; } 該類型 li 的指定個、 ul > li:nth-of-type(3){ color: red; } ul > li:nth-of-type(add){ color: red; } ul > li:nth-of-type(even){ color: red; } 選中從2開始，到最后一個的、 ul > li:nth-of-type(n+2){ color: red; } 選中div標簽為空節點的、<div></div> <div></div> div:empty{ background-color: red; } 當前input是復選框、這個實例是點擊input觸發checked狀態的css，當前input:checked+span在被觸發時就可以選中下一個為span的標簽了，并且利用它改變css樣式、 input:checked + span{ background-color: red; } input:checked + span::after{ content:" Hello Wrold~ "; color: #ccc; } disabled是選中被禁止狀態的標簽， <input type="text" disabled> input:disabled{ background-color: red; } 選中被禁止修改狀態的標簽、 <input type="text" readonly value="這個是禁止修改的狀態。可以選擇，但不能刪改(只讀)"> input:read-only{ color: red; } ```