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

資訊專欄INFORMATION COLUMN

css3偽類和偽元素你都懂了嗎

LoftySoul / 2836人閱讀

摘要：什么是偽類偽類用于定義元素的特殊狀態。例如，它可用于當用戶將鼠標懸停在元素上時為其設置樣式訪問和未訪問的鏈接不同樣式在獲得焦點時設置元素的樣式偽類的語法后代選擇器匹配作為指定元素后代的所有元素。

什么是偽類？

偽類用于定義元素的特殊狀態。 例如，它可用于：

當用戶將鼠標懸停在元素上時為其設置樣式

訪問和未訪問的鏈接不同樣式

在獲得焦點時設置元素的樣式

偽類的語法

后代選擇器匹配作為指定元素后代的所有元素。以下示例選擇

元素內的所有

元素：

選擇器:偽類 {     屬性:值;   }

鏈接可以以不同方式顯示：

/* 未訪問的鏈接 */ 
a:link {   color: red; } 
/* 已瀏覽過的鏈接 */
 a:visited {   color: green; } 
/* 鼠標懸停時候的鏈接 */ 
a:hover {   color: hotpink; }
 /* 選定的鏈接 */ 
a:active {   color: blue; }

注意：a:hover必須在CSS定義a:link之后和a:visited之后才能生效！a:active必須?a:hover在CSS定義之后才能有效！偽類名稱不區分大小寫。

偽類和CSS類

偽類可以與CSS類結合使用：當您將鼠標懸停在示例中的鏈接上時，它將更改顏色：

a.highlight:hover {   color: #ff0000; }
將鼠標懸停在
上

:hover在

元素上使用偽類的示例：

div:hover {   background-color: blue; }
簡單的工具提示懸停

將鼠標懸停在

元素上以顯示

元素（如工具提示）

p {   display: none;   background-color: yellow;   padding: 20px; } 
div:hover p {   display: block; }
:first-child偽類

:first-child偽類指定的元素是另一個元素的第一個子匹配。 在以下示例中，選擇器匹配任何元素的第一個子元素

元素：

p:first-child {   color: blue; }

匹配所有

元素中的第一個元素

p i:first-child {   color: blue; }

匹配所有第一個子

元素中的所有元素

p:first-child i {   color: blue; }
:lang偽類

:lang偽類允許定義不同語言的特殊規則。在下面的示例中，:lang使用lang=“no”定義元素的引用：

q:lang(no) {   quotes: "~" "~"; }
所有CSS偽類
選擇器 例子 描述
:active a:active 選擇active激活鏈接
:checked input:checked 選擇每個選中的元素
:disabled input:disabled 選擇每個禁用的元素
:empty p:empty 選擇每個沒有子元素的

元素
:enabled input:enabled 選擇每個啟用的元素
:first-child p:first-child 選擇作為其父級的第一個子元素的每個

元素
:first-of-type p:first-of-type 選擇每個

元素，它是其父元素的第一個

元素
:focus input:focus 選擇具有焦點的元素
:hover a:hover 選擇鼠標懸停時的鏈接
:in-range input:in-range 選擇具有指定范圍內的值的元素
:invalid input:invalid 選擇具有無效值的所有元素
:lang(language) p:lang(it) 選擇具有以“it”開頭的lang屬性值的每個

元素
:last-child p:last-child 選擇作為其父級的最后一個子元素的每個

元素
:last-of-type p:last-of-type 選擇每個

元素，它是其父元素的最后一個

元素
:link a:link 選擇所有未訪問的鏈接
:not(selector) :not(p) 選擇不是

元素的每個元素
:nth-child(n) p:nth-child(2) 選擇作為其父級的第二個子元素的每個

元素
:nth-last-child(n) p:nth-last-child(2) 選擇每個

元素作為其父元素的第二個子元素，從最后一個子元素開始計算
:nth-last-of-type(n) p:nth-last-of-type(2) 選擇每個

元素作為其父元素的第二個

元素，從最后一個子元素開始計算
:nth-of-type(n) p:nth-of-type(2) 選擇每個

元素，它是其父元素的第二個

元素
:only-of-type p:only-of-type 選擇每個

元素，它是其父元素的唯一

元素
:only-child p:only-child 選擇每個

元素，它是其父元素的唯一子元素
:optional input:optional 選擇沒有“required”屬性的元素
:out-of-range input:out-of-range 選擇元素，其值超出指定范圍
:read-only input:read-only 選擇具有指定“readonly”屬性的元素
:read-write input:read-write 選擇沒有“readonly”屬性的元素
:required input:required 選擇指定了“required”屬性的元素
:root root 選擇文檔的根元素
:target #news:target 選擇當前活動的#news元素（單擊包含該錨名稱的URL）
:valid input:valid 選擇具有有效值的所有元素
:visited a:visited 選擇所有訪問過的鏈接
所有CSS偽元素
選擇器 例子 描述
::after p::after 在每個

元素后插入內容
::before p::before 在每個

元素之前插入內容
::first-letter p::first-letter 選擇每個

元素的第一個字母
::first-line p::first-line 選擇每個

元素的第一行
::selection p::selection 選擇用戶選擇的元素部分

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

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

相關文章

  • CSS3偽類和偽元素

    作為一個CSS3初學不久者來說，很容易混淆單冒號（:）和雙冒號（::）的用法，以為兩者可以互換著來使用。我自己之前也混淆過他們，因為兩者看起來太相像了，就像孿生兄弟。但實際上，他們的區別還是挺大的，最多算得上近房親戚。 下面我們來開始講講單冒號（:）偽類和雙冒號（::）偽元素有什么相同和不同點（另外在CSS2中單冒號: 也叫做偽對象，具體可看看http://www.mb5u.com/tool/cs...

    mozillazg 評論0 收藏0

  • 我終于理解了偽類和偽元素

    摘要：偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間的區別，以致于混淆概念。除了上面這個本質區別以外，在中，偽類用單冒號表示而偽元素用雙冒號表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間...

    張遷 評論0 收藏0

  • 詳解 CSS 屬性 - 偽類和偽元素的區別

    摘要：之前寫了一篇詳解屬性的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區別這里用偽類和偽元素來進行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 @ri...

    AZmake 評論0 收藏0

  • 詳解 CSS 屬性 - 偽類和偽元素的區別

    摘要：之前寫了一篇詳解屬性的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區別這里用偽類和偽元素來進行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 @ri...

    jiekechoo 評論0 收藏0

發表評論

0條評論

LoftySoul

男|高級講師

TA的文章

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