選擇器

規則結構:

分兩個基本部分 選擇器(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 ";}

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

CSS 學習路線(二)選擇器