CSS選擇符、屬性繼承、優先級算法以及CSS3新增偽類、新特性


CSS 選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算? CSS3新增偽類有那些?CSS新增了哪些特性?下面我整理了一些,僅供參考。

CSS 選擇符:

1)      id選擇器(# myid)

2)      類選擇器(.myclassname)

3)      標簽選擇器(div, h1, p)

4)      相鄰選擇器(h1 + p)

5)      子選擇器(ul > li)

6)      后代選擇器(li a)

7)      通配符選擇器( * )

8)      屬性選擇器(a[rel = "external"])

9)      偽類選擇器(a: hover, li:nth-child)

可繼承的樣式:

1)      font-size

2)      font-family

3)      color

4)      text-indent

不可繼承的樣式:

1)      border

2)      padding

3)      margin

4)      width

5)      height

優先級算法:

1)      優先級就近原則,同權重情況下樣式定義最近者為准;

2)      載入樣式以最后載入的定位為准;

3)      3.!important >  id > class > tag  

4)      important 比 內聯優先級高,但內聯比 id 要高

CSS3新增偽類舉例:

1)      p:first-of-type  選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。

2)      p:last-of-type   選擇屬於其父元素的最后 <p> 元素的每個 <p> 元素。

3)      p:only-of-type  選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。

4)      p:only-child     選擇屬於其父元素的唯一子元素的每個 <p> 元素。

5)      p:nth-child(2)  選擇屬於其父元素的第二個子元素的每個 <p> 元素。

6)      :enabled :disabled 控制表單控件的禁用狀態。

7)      :checked         單選框或復選框被選中。

CSS3有哪些新特性?

1)    CSS3實現圓角(border-radius),陰影(box-shadow),

2)    對文字加特效(text-shadow、),線性漸變(gradient),旋轉(transform)

3)    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4)    增加了更多的CSS選擇器  多背景 rgba 

5)    在CSS3中唯一引入的偽元素是 ::selection.

6)    媒體查詢,多欄布局

7)    border-image


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM