国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS 學習筆記——CSS Selector

edagarli / 838人閱讀

摘要：不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。新增屬性選擇器用于定義元素屬性以開頭的元素的樣式如上所示，標記鏈接為綠色。可以是數字，或關鍵字或公式。

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

用于選擇指定類型的元素（其實他就是 html 標簽選擇器），常見用法如下：

body {
    /*對 body 元素定義樣式*/
}

body,div {
    /*同時選擇多種標簽元素*/
}
ID 選擇器

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

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

類選擇器

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

用于選擇層級嵌套的元素，常見使用方法如下：

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

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

用于定義鏈接未被訪問狀態時的樣式，常見使用方法如下：
:visited——鏈接偽類選擇器

用于定義已被訪問的鏈接樣式，常見使用方法如下：

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

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

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

用于定義鼠標經過元素是的樣式，常見使用方法如下：

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

用于定義獲得焦點的元素樣式，常見使用方法如下：

::first-line

用于定義元素內第一行文本的樣式，常見使用方法如下：


    
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
::=first-letter

用于定義元素內第一個字符的樣式，常見使用方式如下：

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

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

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

[attribute]——屬性選擇器

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

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

用于定義屬性中包含指定值且以空格來分隔屬性值得元素，常見使用方法如下：

如上所示，只有第一個 li 的前景色會被定義為紅色！

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

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

如上所示：只有第二個 li 的前景色會被定義為紅色！

:first-child——結構偽類選擇器

用于定義元素的第一個元素的樣式，常見使用方式如下：

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

:lang(en)

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


    
Hello World
::before

用于定義元素之前的內容和樣式，常見使用方法如下：
::after

用于定義元素之后的內容和樣式，常見使用方法如下：
div > p

用于定義元素的第一級子元素的樣式，常見方法使用如下：
h1 + p

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


    
CSS

    
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
CSS3 新增屬性選擇器 [foo^="bar"]

用于定義元素屬性以 bar 開頭的元素的樣式

如上所示，標記 https 鏈接為綠色。

[foo$="bar"]

用于定義元素屬性以 bar 結尾的元素的樣式

如上所示，識別超鏈接的所鏈接的文件格式，并在前面添加文件類型圖標！

[foo*="bar"]

用于定義元素屬性中包含 bar 的元素的樣式，需要注意的是，這里是包含，也就是說無論是什么樣的組合，只要屬性值還有這bar 這三個連續字母的都會被選中！

如上所示：div 內的三個元素都將會被渲染為紅色字體！

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

結構偽類選擇器 :root

用于定義 html 標簽元素的樣式

:nth-child(n)

用于定義子元素的樣式，n 表示第幾個子元素。n 可以是數字，或關鍵字odd、even或公式。常見使用方法如下：


    
        

            name
            gender
            age
        

        

            George
            Male
            23
        

        

            Kevin
            Male
            28
        

        

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

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

:nth-of-type(n)

用于定義相同元素的第 n 個元素的樣式，常見使用方法如下：


    
        

            name
            gender
            age
        

        

            George
            Male
            23
        

        

            Kevin
            Male
            28
        

        

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

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

:last-child

用于定義最后一個元素的樣式，常見使用方法如下：


    
        

            name
            gender
            age
        

        

            George
            Male
            23
        

        

            Kevin
            Male
            28
        

        

            Angule
            Male
            23
:first-of-type

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

:last-of-type

定義最后一個元素相同類型元素的樣式，常見使用方法如下：


    
        

            name
            gender
            age
        

        

            George
            Male
            23
        

        

            Kevin
            Male
            28
        

        

            Angule
            Male
            23
:only-child

用于定義子元素只有一個且與制定元素標簽相同，常見使用方法如下：


    
Hello
:only-of-type

用于定義只包含一個制定的標簽元素的樣式，常見使用方法如下：


    
Hello
:empty

用于定義，一個元素中沒有包含任何子元素的樣式，常見使用方法如下：
CSS3 新增的其他選擇器 E ~ F

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


    
Hello




CSS

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

:not(s)

用于定義指定元素，并且過濾 s 所指定的選擇器元素，常見使用方法如下：


    
Hello

    
World

    
Welcome!

注意：s 是一個簡單的結構選擇器，不能使用復合選擇器，該選擇器只匹配第一個復合條件的元素。如上所示，最后一個 p 不會被渲染為藍色！

:target

用于定義被訪問的錨鏈樣式，常見使用方法如下：


    

        
這是第一個文本段

    

    

        
這是第二個文本段

注意：當我們激活錨鏈時（url中包含 #text-one 或 #text-two），對應的 div 內的元素字體會被渲染為紅色！

CSS3 UI 元素狀態偽類選擇器 :enabled

用于定義元素的 enabled 時的樣式，常見使用方式如下：

注意：元素默認狀態為 enabled

:disabled

用于定義元素處于禁用狀態時的樣式，常見使用方法如下：
:checked

用于定義元素被選中時的樣式，常見使用方式如下：

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112154.html

相關文章

  • jQuery學習筆記

    摘要：提高業務編程能力中提供了很多的方法基本都兼容，我們可以使用這些方法快速開發項目中有的方法提供的思想可以讓我們把項目實現得更優化提高基礎以及一些高級編程思想分析源碼，學習里面類庫封裝的思想和一些方法實現的原理有時間把中提供的常用方法都去實現一 jQuery 提高業務編程能力 JQ中提供了很多的方法（基本都兼容），我們可以使用這些方法快速開發項目 JQ中有的方法提供的思想可以讓我們把...

    GHOST_349178 評論0 收藏0

  • SCSS學習筆記（一）

    摘要：的由來就是加強版的，要講那就一定要從講起英文全稱是一個最初由設計并由開發的層疊樣式表語言。年發行，年版本穩定，設計和開發分開進行，讓這個語言的功能相當完善。變量允許使用變量，所有變量以開頭。 SCSS的由來 SCSS就是加強版的CSS，要講SCSS那就一定要從SASS講起 SASS Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Ha...

    simpleapples 評論0 收藏0

  • CSS 學習筆記——CSS Selector

    摘要：不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。新增屬性選擇器用于定義元素屬性以開頭的元素的樣式如上所示，標記鏈接為綠色。可以是數字，或關鍵字或公式。 CSS1 中定義的選擇器 類型選擇器 用于選擇指定類型的元素（其實他就是 html 標簽選擇器），常見用法如下： body { /*對 body 元素定義樣式*/ } body,div { ...

    邱勇 評論0 收藏0

  • 重學前端學習筆記（十三）--瀏覽器工作解析（三）

    摘要：三操作過程首先，須把規則進行處理。后代選擇器空格后代選擇器的作用范圍是父節點的所有子節點，因此規則是在匹配到本標簽的結束標簽時回退。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，...

    trigkit4 評論0 收藏0

  • 重學前端學習筆記（十三）--瀏覽器工作解析（三）

    摘要：三操作過程首先，須把規則進行處理。后代選擇器空格后代選擇器的作用范圍是父節點的所有子節點，因此規則是在匹配到本標簽的結束標簽時回退。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，...

    yintaolaowanzi 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<