CSS選擇器種類及使用方法

2018年04月17日

|?萬仟網IT編程

?|?我要評論

css選擇器 有通配符選擇器書寫格式：*+｛聲名塊｝ 并集選擇器/組合選擇器 書寫格式;元素或類或id+“”+元素或類或id+“，”+元素或類或id｛聲明塊｝ 列：h1，h2，h3｛color：red；｝ 層次選擇器 ： 子集選擇器： 格式:父級元素名稱+">"+子級元素名稱+{聲明塊} 例:div ...

css選擇器

有通配符選擇器書寫格式：*+｛聲名塊｝

并集選擇器/組合選擇器 書寫格式;元素或類或id+“”+元素或類或id+“，”+元素或類或id｛聲明塊｝

列：h1，h2，h3｛color：red；｝

層次選擇器 ：

子集選擇器： 格式:父級元素名稱+">"+子級元素名稱+{聲明塊}

例:div>p{color:red;}

后代選擇器： 格式:祖先元素名稱+空格+后代元素名稱+{聲明塊}

例:div p{color:red;}

兄第選擇器： 格式: A元素名稱+"+"+B元素名稱+{聲明塊}

例:div+P{color:red;} 注:選擇A元素后的B元素,AB之間不許有其他元素.

通用選擇器： 格式:同級元素A+"~"+同級元素B+{聲明塊}

例:div~p{color:red;} 注:表示選擇與A元素同級別的所有B元素(B的位置是在A后面)。

偽類選擇器

動態偽類選擇器未訪問 (把默認值改為黑色)；

a:link{color:black;}

鼠標懸停

a:hover{color:pink;}

鼠標點擊時

a:active{color:green;}

點擊后

a:visited{color:五顏六色;}；

注:hover是可以用于多個元素身上的,但其他三個只能用于具有點擊功能的元素上。

a:focus{color:顏色;}

多用于輸入框或鏈接(注:IE7以前不支持:focus注；IE6以前不支持:hover :active)

以上5個的順序要求: A:link,visited,focus,hover,active

B:visited,link,focus,hover,active

結構偽類選擇器

格式:元素名稱+":nth-child(n)"+{聲明塊} 例:section:nth-child(2){color:deeppink;}

表示選中html里的第二個section元素,文字設置為deeppink

選中第一個 格式:元素名稱+":first-child"+{聲明塊} 例:p:first-child{color:red;}

選中最后一個 格式:元素名稱+":last-child"+{聲明塊} 例:p:last-child{color:red;}

選中奇數項 格式:元素名稱+":nth-child(odd)"+{聲明塊} 例:section:nth-child(odd){color:red;}

選中偶數項 格式:元素名稱+":nth-child(even)"+{聲明塊} 例:section:nth-child(even){color:red;}

偽元素選擇器

元素后面加內容

格式:元素名稱+":after"+{content:"要添加的內容";} 例:i:after{content:"姓名";}

元素前面加內容

格式:元素名稱+":before"+{content:"要添加的內容";} 例:i:before{content:"姓名";}

元素第一行添加樣式

格式:元素名稱+":first-line"+{聲明塊} 例:p:first-line{color:red;}

元素第一個字母或第一個漢字

格式:元素名稱+":first-letter"+{聲明塊} 例:p:first-letter{color:red;}

注:為了解決兼容性,偽元素選擇器,建議打兩個冒號

版權聲明：本文內容由互聯網用戶貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲服務，不擁有所有權，不承擔相關法律責任。

如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 2386932994@qq.com 舉報，一經查實將立刻刪除。

相關文章:

1、數組去重的方法(例 var arr = [1,2,4,6,4,2,1]);

1、第一種方法

本篇文章主要介紹【HTML5】3D模型--百行代碼實現旋轉立體魔方實例，具有一定的參考價值，有需要的可以了解一下。... 16-12-16

作為一個視頻編碼小白，最近開始著手啃HEVC幀間預測的代碼，想用博客記錄一下自己的學習過程，也想與大家分享、交流...

一款網頁瀑布流效果，可以實現圖片的無限制加載。基于時下流行的HTML5技術編寫而成，除了實現瀑布流，還加入了CSS5的圖片修飾效果，比如圖片的圓角邊框、圖片陰影...

HTTP中get和post的區別 GET 從指定的資源請求數據。 POST 向指定的資源提交要被處理的數據 | | GET | POST | | |...

下面小編就為大家帶來一篇HTML5不支持標簽和新增標簽詳解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧... 16-06-27...

新手一枚，解決的問題喜歡記錄，也許正好有人在網上迷茫的百度著。-0- 最近使用Chart.js做折線圖的報表展示，直接顯示整數啥的很好弄畢竟例子直接...

這篇文章主要介紹了HTML5 canvas繪制的玫瑰花效果,適合程序猿在情節送給小女友哦,需要的朋友參考下吧... 14-05-29

最近遇到這方面知識，就自己找了一些資料，進行了一些總結 什么是分段傳輸？ 當引入了一個http首部。這個首部標識了實體采用chunked編碼傳輸，c...

網友評論

驗證碼：

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的HTML5类选择器使用,CSS选择器种类及使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。