P6225 [eJOI2019]異或橙子 樹狀陣列 異或 位運算
複合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。
交集選擇器
交集選擇器由兩個選擇器構成,其中第一個為標籤選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,如h3.special。
記憶技巧:
交集選擇器 是 並且的意思。 即...又...的意思
比如: p.one 選擇的是: 類名為 .one 的 段落標籤。
用的相對來說比較少,不太建議使用。
並集選擇器(CSS選擇器分組)是各個選擇器通過逗號連線而成的,任何形式的選擇器(包括標籤選擇器、class類選擇器id選擇器等),都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同,或部分相同,就可以利用並集選擇器為它們定義相同的CSS樣式。
記憶技巧:
並集選擇器 和 的意思, 就是說,只要逗號隔開的,所有選擇器都會執行後面樣式。
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個選擇器都會執行顏色為紅色。 通常用於集體宣告。
後代選擇器
後代選擇器又稱為包含選擇器,用來選擇元素或元素組的後代,其寫法就是把外層標籤寫在前面,內層標籤寫在後面,中間用空格分隔。當標籤發生巢狀時,內層標籤就成為外層標籤的後代。
子孫後代都可以這麼選擇。 或者說,它能選擇任何包含在內 的標籤
子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面,子級標籤寫在後面,中間跟一個 > 進行連線,注意,符號左右兩側各保留一個空格。
比如: .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。
屬性選擇器
選取標籤帶有某些特殊屬性的選擇器 我們成為屬性選擇器
<style> /*選擇input中帶有value屬性的*/ input[value]{ color:pink; }/*選擇input中帶有type屬性且值為password的*/ input[type="password"]{ color:red; }
/*選擇input中有name屬性且屬性值以pas開頭的*/ input[name^=pas]{ color:royalblue; }
/*選擇input中有type屬性且屬性值中含有t的*/ input[type*="t"]{ color:aqua; } </style> <body> <inputtype="text"value="123"name="text"> <inputtype="password"name="pas"> <inputtype="text"name="password"> <inputtype="text"name="word"> </body>
-
E::first-letter文字的第一個單詞或字(如中文、日文、韓文等)
-
E::first-line 文字第一行;
-
E::selection 可改變選中文字的樣式;
p::first-letter {
font-size: 20px;
color: hotpink;
}
/* 首行特殊樣式 */
p::first-line {
color: skyblue;
}
p::selection {
/* font-size: 50px; */
color: orange;
}
4、E::before和E::after
在E元素內部的開始位置和結束位建立一個元素,該元素為行內元素,且必須要結合content屬性使用。
div::befor {
content:"開始";
}
div::after {
content:"結束";
}
E:after、E:before 在舊版本里是偽元素,CSS3的規範裡“:”用來表示偽類,“::”用來表示偽元素,但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before,這樣做的目的是用來做相容處理。
E:after、E:before後面的練習中會反覆用到,目前只需要有個大致瞭解
":" 與 "::" 區別在於區分偽類和偽元素