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