大資料實戰(十六):電商數倉(九)之使用者行為資料採集(九)元件安裝(五)Kafka安裝
阿新 • • 發佈:2020-08-14
css3選擇器
https://www.cnblogs.com/nyw1983/p/11628364.html
自定義屬性:自己新增的屬性,配合js,控制dom
屬性選擇器
權重為10
/* 不允許屬性值有空格 */
a[class="links"]{
background:red;
}
/* 多選 不允許屬性值有空格 */
a[class="links"][ class="test"]{
background:red;
}
/* 只要出現links就被選中,即使後面有空格 */ a[class~="links"]{ background:red; }
/* 以xx開頭 */
/* 只要出現樣式以xx開頭,就被選中 */
a[class^="active links"]{
background:red;
}
/* 只要出現樣式以xx結尾,就被選中 */
a[class$="active links"]{
background:red;
}
/* 只要包含就被選中 */
a[class*="active links"]{
background:red;
}
偽類選擇器
權重為10
動態偽類
- a:link 沒有被訪問時的樣式
- a:visited 被訪問後的樣式
- a:hover 滑鼠懸浮的樣式
- a:active 滑鼠點中啟用,按住不動 時的樣式
LVHA
- input輸入框的 foucs 聚焦時的樣式
UI元素狀態偽類
-
enabled 預設樣式屬性
-
checked 被選中的樣式
input[type="radio"]:checked{ }
-
禁用之後的樣式
input[type="checkbox"]:disabled{ }
結構偽類
1. 選擇文件根元素
html:rooot
2. 選擇內容為空的元素,進行處理
ul li:empty{ }
3.選擇某個元素的第一個元素
ul li:first-child{
}
4.選擇某個元素的最後一個元素
ul li:last-child{
}
5. 選擇第幾個元素
ul li:nth-child(3){
6. 規律性間隔選擇
/* 2n 3n+1 規律性間隔*/
li:nth-child(3n){
}
7. 正方向範圍(從第n個開始)
/* 選中從第6個開始的子元素 */
li:nth-child(n+6){
}
8. 負方向範圍(從開始一直到第n個)
/* 選中從第1個到第9個子元素。使用 :nth-child(-n+9) ,就相當讓你選中第9個和其之前的所有子元素 */
a:nth-child(-n+9){
}
9. 中間範圍選擇
/* 選擇第2個到底6個 */
.nav_box a:nth-child(-n+6):nth-child(n+2)
10.從最後開始,選擇一個或者多個
ul li:nth-last-child{
}
11 .選擇第奇數個元素
ul li:nth-child(odd){
}
12 .選擇第偶數個元素
ul li:nth-child(even){
}
nth下面的元素必須是清一色的同一種類型元素 ,是先看第幾個,再看選擇的是哪個元素
13. 選擇指定的標籤的第幾個標籤
.boss h3:nth-of-type(3){
}
14. 選擇指定標籤的第一個標籤
.boss div:first-of-type(){
}
15. 選擇指定標籤的最後一個標籤
.boss h2:last-of-type(){
}
16. 從最後一個倒著數,選擇標籤
.boss div:nth-last-of-type(){
}
目的偽類
需要加id
<div id="text1">
/* id配合錨點 */
<a href="text1">測試</a>
</div>
div{
display:none;
}
div:target{
display:block;
}