CSS筆記- 組合選擇器符號使用

優先順序

id>class>type &sudo
type：如h2,div,p...
id:#
class選擇器:命名方式


偽類
1.選中某些狀態:first-child
2.用戶行為:hover

偽元素(::)
1.first-line
2.before,after,可用來插入一个图标

Single line grouping

不同標籤一次給定同樣css

h1, h2, h3{
color: blue;
}
/* 所有h1,h2,h3會顯示相同結果 */

後代選擇器(Descendant Selector)

div p {
    color: red;
}
/*所有在div標籤內的p元素都會套用 */

子代選擇器(Child Selector)

div>p {
    color: red;
}
/*只有div標籤內第一層的p元素才會套用 */

Sibling Selector

div~p {
    color: red;
}
/*和div標籤同層的p元素才會套用 */

Next-sibling combinator

div + p {
    color: red;
}
/*同個父元素內且與div標籤相鄰的第一個p元素才會套用 */

Class Selector

div.class1 .class2 {
 
    color: red;
}
/*所有div且class同時有"class1"與"class2"的才會套用 */

nth-child()

<An+B>
A:一次走多少
n:遞增的整數，從０開始
B: offset

nth-child(2n+1) = nth-child(odd)
nth-child(2n) = nth-child(even)
nth-child(-n+3):前三個(-0+3, -1+3, -2+3)
nth-child(n+8) : nth-child(-n+15)
:指定第8~15個元素

selector位置的差異

:nth-child(-n + 3 of li.important) {
}
/* 從所有li中找出前三個同時是li item 且class='important'的元素 */

li.important:nth-child(-n + 3) {
}
/* 從前三個li item中,找出class='important' */

ref:

https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

https://selflearningsuccess.com/css-combinators/