選擇器

規則結構:

分兩個基本部分?選擇器(selector)和聲明塊(declaration block)?組成

聲明塊:由一個或多個聲明組成,每一個聲明都是屬性-值對

?

選擇器分為:元素選擇器,類選擇器,后代選擇器,通配選擇器,ID選擇器,屬性選擇器,偽類選擇器.子元素選擇器,相鄰兄弟選擇器.

元素選擇器:往往是html元素,但是在XML允許創造新的標記語言.

eg:h1 p??

h1{font-size:14px;}

?

類選擇器:應用樣式而不考慮具體涉及的元素.

eg:

.main{font-size:14px;}}

<p class="main">123</p>

?

ID選擇器:和類選擇器差不多.區別在于只能在文檔運用一次,多次不符合規范,

eg:

#main{font-size:14px;}}

<p id="main">123</p>

?

通配選擇器:運用在全局,但是不推薦.易出錯.

eg:

*{font-size:14px;}

?

后代選擇器:運用在父元素的所有子元素上,

eg:

h1 p{font-size:14px;} //運用在h1下的所有p元素

?

子元素選擇器:運用在父元素的第一代子元素上

eg:

h1 > p{font-size:14px;}?//運用在h1下的第一代p元素

?

相鄰兄弟選擇器:相同父元素下,選擇緊跟著另一個元素后的元素

eg:

h1 p{font-size:14px;}//運用在h1和p的父元素下,接下來的P元素

?

屬性選擇器:根據元素的屬性來選擇元素,分為四種:簡單屬性選擇,具體屬性選擇,部分屬性選擇,特定元素選擇

簡單屬性選擇:

h1[class]{color:red;}

<p class="main">hello world</p>

具體屬性選擇:

h1[class="main"]{color:red;}

<p class="main">hello world</p>

部分屬性選擇:

h1[class*="main"]{color:red;}//含有就可以

h1[class^="main"]{color:red;}//main開頭的元素

h1[class$="main"]{color:red;}//main結尾的元素

h1[class~="main"]{color:red;}//獨立單詞的元素

<p class="main?qq">hello world</p>

特定屬性選擇:

*[lang|="en"]{color:red;}

<p lang="en-ss">Hello</p>

?

偽類元素選擇器:為鏈接選擇

eg:

順序為LVHA

a:link{color:red;}//未訪問的鏈接

a:visited{color:green;}//已訪問的鏈接

a:hover{ color:red;}//懸浮在鏈接上

a:active{color:yellow;}//激活后的鏈接

還有?p:first-child?第一個子元素

:first-letter?首字母樣式

:first-line? 第一行樣式

:before? 之前插入內容 //body:before{content:"hello ";}

:after???之后插入內容 //body:after{content:"hello ";}

?

?

這是我總結的部分選擇器基礎知識.

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的CSS 学习路线(二)选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

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