【前端學習】-粗談選擇器

Charlie_Jade 發(fā)布于2019-08-29 13:29 / 3404人閱讀

摘要：對于一個前端，選擇器是日常生活中必須接觸的部分，這篇文章主要探討一下選擇其的分類及一些小技巧。

對于一個前端er，選擇器是日常生活中必須接觸的部分，這篇文章主要探討一下選擇其的分類及一些小技巧。

【分類】
1.基礎(chǔ)選擇器
2.結(jié)構(gòu)選擇器
3.偽類選擇器
4.偽元素
5.屬性選擇器

【描述】
1.基礎(chǔ)選擇器（瀏覽器都兼容）

* 通配符 （可以匹配元素中所有的html元素）
    如：*{color:#000;}則代表將頁面全部元素添加屬性為#000的顏色值；
E 元素選擇器（匹配特定的標簽）
    如：a{text-decoration:underline;}則代表將頁面所有的a標簽設(shè)置下劃線；
#id ID選擇器（匹配頁面特定的id）
    如：#my{color:#000}則代表將頁面id為my的元素添加屬性為#000的顏色值；
.class 類選擇器（匹配頁面特定的class）
    如：.my{color:#000}則代表將頁面class為my的元素添加屬性為#000的顏色值；
S1,S2 群組選擇器（匹配包含S1，包含S2元素，匹配一個即可）
    如：.my,.you{color:#000}則代表將頁面class為my和class為you的元素添加屬性為#000的顏色值；
S1S2 合并選擇器（匹配包含S1及S2的元素，該元素同時必須包含S1及S2）
    如：.my.you{color:#000}則代表將頁面class有my及you的元素添加屬性為#000的顏色值；

2.結(jié)構(gòu)選擇器

S1 S2 后代選擇器（S1所有的后代S2）
S1>S2 子選擇器（S1的子元素S2 IE7+）
S1+S2 相鄰兄弟選擇器（S1后面的相鄰兄弟元素S2 IE7+）
S1~S2 通用兄弟選擇器（S1后面的所有兄弟元素S2，IE7+）

【舉例圖示】
a.區(qū)分S1 S2及S1,S2及S1S2三類選擇器；

    .me,.you{
        color: deeppink;
    }
    .you.me{
        background: #eee;
    }
    .me .you{
        color: #0f0;
    }

添加如上結(jié)構(gòu)及樣式，可得到下面的效果:

可以看出來.me,.you群組選擇器即只要包含了任意一個即可生效；.me .you后代選擇是只有.me的后代.you才會生效，.me.you合并選擇器，是需要兩個選擇器都包含才會生效。

b.區(qū)分各類兄弟選擇器

    
        son1
        son2
        son3
        son4
    
    
        son other

    .parent >.son{
        color: #0f0;
    }
    .son1 + .son{
        text-align: center;
    }
    .son1 ~ .son{
        background: #eee;
    }

添加如上結(jié)構(gòu)及樣式，可得到下面的效果:

3.偽類選擇器

動態(tài)偽類選擇器
    :link
    :visited
    :acitve(IE8+)
    :hover
    :focus(IE8+)
目標偽類選擇器
    :target(IE9+)
語言偽類選擇器
   :lang(language)
ui元素狀態(tài)偽類選擇器（IE9+）
    :checked  選中態(tài)
    :enabled    啟用態(tài)
    :disabled    禁用態(tài)
結(jié)構(gòu)偽類選擇器(IE9+)
    :first-child
    :last-child
    :root
    :nth-child(n) odd even
    :nth-last-child(n)
    :nth-of-type(n)
    :nth-last-of-type(n)
    :first-of-type
    :last-of-type
    :only-child
    :only-of-type
    :empty

    n的場景 n n*length n+length -n+length n*length+b odd even

否定偽類選擇器
    :not (IE9+)

【舉例圖示】
以上偽類選擇器，結(jié)構(gòu)偽類選擇器在日常效果中應(yīng)用最為廣泛，應(yīng)用恰當可以得到很多意想不到的效果。【具體效果會另開文章再更新】

4.偽元素

::first-letter 第一個字母
::first-line 第一行文本
::before 在元素前插入內(nèi)容，但不會生成dom，可以設(shè)置樣式【會在下篇文章補充說明】
::after 在元素后插入內(nèi)容，但不會生成dom，可以設(shè)置樣式，常用于清除浮動【會在下篇文章補充說明】

5.屬性選擇器【IE7+】

E[attr] 匹配具有屬性attr的元素E
E[attr=val] 匹配屬性attr為val的元素E
E[attr|=val] 以val 或者val-開頭
E[attr~=val] 屬性值要包含val這個屬性
E[attr*=val] 屬性值中有val這個字符串就可以
E[attr^=val] 以val開頭
E[attr$=val] 以val結(jié)束