成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 學(xué)習(xí)筆記——CSS Selector

edagarli / 849人閱讀

摘要：不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。新增屬性選擇器用于定義元素屬性以開(kāi)頭的元素的樣式如上所示，標(biāo)記鏈接為綠色。可以是數(shù)字，或關(guān)鍵字或公式。

CSS1 中定義的選擇器 類型選擇器

用于選擇指定類型的元素（其實(shí)他就是 html 標(biāo)簽選擇器），常見(jiàn)用法如下：

body {
    /*對(duì) body 元素定義樣式*/
}

body,div {
    /*同時(shí)選擇多種標(biāo)簽元素*/
}
ID 選擇器

用于選擇指定 ID 的 html 元素，常見(jiàn)使用方法如下：

因?yàn)?CSS 的渲染順序是從右往左進(jìn)行渲染的，而 ID 則是全唯一的，那么就可以省略掉前面的類型選擇器。

類選擇器

用于選擇指定類名的 html 元素，常見(jiàn)使用方法如下：
包含選擇器

用于選擇層級(jí)嵌套的元素，常見(jiàn)使用方法如下：

需要注意的是：包含選擇器不關(guān)心層級(jí)，只要后面的選擇器是被包含在前一個(gè)元素中的即可。如上述例子，兩個(gè) nav-tools 都會(huì)被選擇器選中！

偽類選擇器 :link——鏈接偽類選擇器

用于定義鏈接未被訪問(wèn)狀態(tài)時(shí)的樣式，常見(jiàn)使用方法如下：
:visited——鏈接偽類選擇器

用于定義已被訪問(wèn)的鏈接樣式，常見(jiàn)使用方法如下：

:active——用戶操作偽類選擇器

用于定義被激活的元素樣式，常見(jiàn)使用方法如下：

:hover——用戶操作偽類選擇器

用于定義鼠標(biāo)經(jīng)過(guò)元素是的樣式，常見(jiàn)使用方法如下：

:focus——用戶操作偽類選擇器

用于定義獲得焦點(diǎn)的元素樣式，常見(jiàn)使用方法如下：

::first-line

用于定義元素內(nèi)第一行文本的樣式，常見(jiàn)使用方法如下：


    
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
::=first-letter

用于定義元素內(nèi)第一個(gè)字符的樣式，常見(jiàn)使用方式如下：

CSS2中定義的選擇器 *——通配選擇器

用于定義 DOM 中所有元素的共同樣式，常見(jiàn)使用方法如下：

如果要重置默認(rèn)樣式的話，不建議使用通配選擇器

[attribute]——屬性選擇器

用于定義元素包含屬性為attribute的元素的樣式，常見(jiàn)使用方法如下：
[attribute=“value”]——屬性選擇器

用于定義元素屬性的值為指定的值樣式，常見(jiàn)使用方法如下：
[attribute~="value"]——屬性選擇器

用于定義屬性中包含指定值且以空格來(lái)分隔屬性值得元素，常見(jiàn)使用方法如下：

如上所示，只有第一個(gè) li 的前景色會(huì)被定義為紅色！

[attribute|="value"]——屬性選擇器

用于定義屬性中包含指定值且以連字符（-）鏈接的屬性值，常見(jiàn)使用方法如下：

如上所示：只有第二個(gè) li 的前景色會(huì)被定義為紅色！

:first-child——結(jié)構(gòu)偽類選擇器

用于定義元素的第一個(gè)元素的樣式，常見(jiàn)使用方式如下：

注意 :first-child 是作用于同級(jí)，且相同標(biāo)簽的第一個(gè)元素。如上所示，如果要定義第一個(gè) li 的樣式，那么久需要使用 li:first-child，而不是 ul:first-child!

:lang(en)

用于定義屬性為 lang=“en” 的元素樣式，常見(jiàn)使用方法如下：


    
Hello World
::before

用于定義元素之前的內(nèi)容和樣式，常見(jiàn)使用方法如下：
::after

用于定義元素之后的內(nèi)容和樣式，常見(jiàn)使用方法如下：
div > p

用于定義元素的第一級(jí)子元素的樣式，常見(jiàn)方法使用如下：
h1 + p

用于定義元素相鄰的元素樣式，常見(jiàn)使用方法如下：


    
CSS

    
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。
CSS3 新增屬性選擇器 [foo^="bar"]

用于定義元素屬性以 bar 開(kāi)頭的元素的樣式

如上所示，標(biāo)記 https 鏈接為綠色。

[foo$="bar"]

用于定義元素屬性以 bar 結(jié)尾的元素的樣式

如上所示，識(shí)別超鏈接的所鏈接的文件格式，并在前面添加文件類型圖標(biāo)！

[foo*="bar"]

用于定義元素屬性中包含 bar 的元素的樣式，需要注意的是，這里是包含，也就是說(shuō)無(wú)論是什么樣的組合，只要屬性值還有這bar 這三個(gè)連續(xù)字母的都會(huì)被選中！

如上所示：div 內(nèi)的三個(gè)元素都將會(huì)被渲染為紅色字體！

雖然 CSS3 中任然保留 CSS2 中定義的屬性選擇器，但是建議使用 CSS3 的屬性選擇器來(lái)替代！

結(jié)構(gòu)偽類選擇器 :root

用于定義 html 標(biāo)簽元素的樣式

:nth-child(n)

用于定義子元素的樣式，n 表示第幾個(gè)子元素。n 可以是數(shù)字，或關(guān)鍵字odd、even或公式。常見(jiàn)使用方法如下：


    
        

            name
            gender
            age
        

        

            George
            Male
            23
        

        

            Kevin
            Male
            28
        

        

            Angule
            Male
            23
:nth-last-child(n)

與 :nth-child(n)用法相同，只是排序方式是從后往前！

:nth-of-type(n)

用于定義相同元素的第 n 個(gè)元素的樣式，常見(jiàn)使用方法如下：


    
        

            name
            gender
            age
        

        

            George
            Male
            23
        

        

            Kevin
            Male
            28
        

        

            Angule
            Male
            23
:nth-last-of-type(n)

與 :nth-of-type(n)用法相同，只是排序方式是從后往前！

:last-child

用于定義最后一個(gè)元素的樣式，常見(jiàn)使用方法如下：


    
        

            name
            gender
            age
        

        

            George
            Male
            23
        

        

            Kevin
            Male
            28
        

        

            Angule
            Male
            23
:first-of-type

定義第一個(gè)元素相同類型元素的樣式，與 :nth-of-type(1) 效果一樣

:last-of-type

定義最后一個(gè)元素相同類型元素的樣式，常見(jiàn)使用方法如下：


    
        

            name
            gender
            age
        

        

            George
            Male
            23
        

        

            Kevin
            Male
            28
        

        

            Angule
            Male
            23
:only-child

用于定義子元素只有一個(gè)且與制定元素標(biāo)簽相同，常見(jiàn)使用方法如下：


    
Hello
:only-of-type

用于定義只包含一個(gè)制定的標(biāo)簽元素的樣式，常見(jiàn)使用方法如下：


    
Hello
:empty

用于定義，一個(gè)元素中沒(méi)有包含任何子元素的樣式，常見(jiàn)使用方法如下：
CSS3 新增的其他選擇器 E ~ F

用于定義兄弟元素的樣式，常見(jiàn)使用方法如下：


    
Hello




CSS

div 元素中的 p 不會(huì)被渲染為紅色字體，只有跟 div 是同級(jí)的 p 才會(huì)被渲染為紅色！

:not(s)

用于定義指定元素，并且過(guò)濾 s 所指定的選擇器元素，常見(jiàn)使用方法如下：


    
Hello

    
World

    
Welcome!

注意：s 是一個(gè)簡(jiǎn)單的結(jié)構(gòu)選擇器，不能使用復(fù)合選擇器，該選擇器只匹配第一個(gè)復(fù)合條件的元素。如上所示，最后一個(gè) p 不會(huì)被渲染為藍(lán)色！

:target

用于定義被訪問(wèn)的錨鏈樣式，常見(jiàn)使用方法如下：


    

        
這是第一個(gè)文本段

    

    

        
這是第二個(gè)文本段

注意：當(dāng)我們激活錨鏈時(shí)（url中包含 #text-one 或 #text-two），對(duì)應(yīng)的 div 內(nèi)的元素字體會(huì)被渲染為紅色！

CSS3 UI 元素狀態(tài)偽類選擇器 :enabled

用于定義元素的 enabled 時(shí)的樣式，常見(jiàn)使用方式如下：

注意：元素默認(rèn)狀態(tài)為 enabled

:disabled

用于定義元素處于禁用狀態(tài)時(shí)的樣式，常見(jiàn)使用方法如下：
:checked

用于定義元素被選中時(shí)的樣式，常見(jiàn)使用方式如下：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112154.html

相關(guān)文章

  • jQuery學(xué)習(xí)筆記

    摘要：提高業(yè)務(wù)編程能力中提供了很多的方法基本都兼容，我們可以使用這些方法快速開(kāi)發(fā)項(xiàng)目中有的方法提供的思想可以讓我們把項(xiàng)目實(shí)現(xiàn)得更優(yōu)化提高基礎(chǔ)以及一些高級(jí)編程思想分析源碼，學(xué)習(xí)里面類庫(kù)封裝的思想和一些方法實(shí)現(xiàn)的原理有時(shí)間把中提供的常用方法都去實(shí)現(xiàn)一 jQuery 提高業(yè)務(wù)編程能力 JQ中提供了很多的方法（基本都兼容），我們可以使用這些方法快速開(kāi)發(fā)項(xiàng)目 JQ中有的方法提供的思想可以讓我們把...

    GHOST_349178 評(píng)論0 收藏0

  • SCSS學(xué)習(xí)筆記（一）

    摘要：的由來(lái)就是加強(qiáng)版的，要講那就一定要從講起英文全稱是一個(gè)最初由設(shè)計(jì)并由開(kāi)發(fā)的層疊樣式表語(yǔ)言。年發(fā)行，年版本穩(wěn)定，設(shè)計(jì)和開(kāi)發(fā)分開(kāi)進(jìn)行，讓這個(gè)語(yǔ)言的功能相當(dāng)完善。變量允許使用變量，所有變量以開(kāi)頭。 SCSS的由來(lái) SCSS就是加強(qiáng)版的CSS，要講SCSS那就一定要從SASS講起 SASS Sass（英文全稱：Syntactically Awesome Stylesheets）是一個(gè)最初由Ha...

    simpleapples 評(píng)論0 收藏0

  • CSS 學(xué)習(xí)筆記——CSS Selector

    摘要：不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。新增屬性選擇器用于定義元素屬性以開(kāi)頭的元素的樣式如上所示，標(biāo)記鏈接為綠色?？梢允菙?shù)字，或關(guān)鍵字或公式。 CSS1 中定義的選擇器 類型選擇器 用于選擇指定類型的元素（其實(shí)他就是 html 標(biāo)簽選擇器），常見(jiàn)用法如下： body { /*對(duì) body 元素定義樣式*/ } body,div { ...

    邱勇 評(píng)論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十三）--瀏覽器工作解析（三）

    摘要：三操作過(guò)程首先，須把規(guī)則進(jìn)行處理。后代選擇器空格后代選擇器的作用范圍是父節(jié)點(diǎn)的所有子節(jié)點(diǎn)，因此規(guī)則是在匹配到本標(biāo)簽的結(jié)束標(biāo)簽時(shí)回退。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】，如有侵權(quán)請(qǐng)聯(lián)系我，...

    trigkit4 評(píng)論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十三）--瀏覽器工作解析（三）

    摘要：三操作過(guò)程首先，須把規(guī)則進(jìn)行處理。后代選擇器空格后代選擇器的作用范圍是父節(jié)點(diǎn)的所有子節(jié)點(diǎn)，因此規(guī)則是在匹配到本標(biāo)簽的結(jié)束標(biāo)簽時(shí)回退。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】，如有侵權(quán)請(qǐng)聯(lián)系我，...

    yintaolaowanzi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<