一、一些css3 的選擇器
1.1 兒子選擇器
兒子選擇器就是》:
ie7 開始相容,ie6不相容
div>p{
color: red;
1.2序選擇器
ie8開始相容,ie6,7不相容
選擇第乙個li:
< style type="text/css">
ul li:first-child{
color: red;
選擇最後乙個li:
1.3下乙個兄弟選擇器
+表示
1.4相容問題的介紹
1.瀏覽器相容問題,ie6,ie7都是很低階的瀏覽器,一般就是這兩個瀏覽器的相容問題。
2.瀏覽器的占有率:
二、css的繼承性和層疊性
2.1繼承性
有些屬性,當自己設定的時候,自己的後代都繼承上了,這就是繼承性。
哪些屬性可以繼承?
color、text開頭的、line-開頭的、font-開頭的
關於文字樣式的都可以繼承,所有關於盒子定位的布局的屬性都不能繼承。
2.2層疊性
層疊性:就是css處理衝突的能力。所有的權重計算,沒有任何相容的問題
(1)當選擇器選上了某個元素的時候,那麼要統計權重。
id數量,類的數量,標籤的數量
同樣的都選擇相同的p,權重:
1,1,1
1,0,3
0,3,4
比較的是先id數量,再類數量,後標籤數量。第一種權重大。
如果權重一樣則以後出現的為準。
(2)如果不能直接選中某個元素,權重為零
開始數權重的時候,先要看是不是真的選中了文字所在的最內層。
如果都是0,那麼有乙個就近原則,誰進就聽誰的。
權重大總結:
1)先看有沒有選中,如果選中了,那麼以(id數,類數,標籤數)來計算權重
如果都一樣的大,聽寫在後面的。
2)如果沒有選中,那麼權重是0,如果都是0,就近原則,誰描述的進,聽誰的。
2.3權重問題深入
1.同乙個標籤,攜帶多個類名,有衝突
我是什麼顏色?
我是什麼顏色?
和在標籤中的類名書寫順序無關,之和css的順序有關,
.spe2{
color:blue;
.spe1{
color:red;
結果是紅色的,因為css中red寫在後面,只看css樣式,誰在前面誰在後面。
2.4!important 標記
important是英語重要意思,可以通過語法k:v !important;來給屬性提高權重,這樣的權重是無窮大的。
1)!important提公升的是乙個屬性,而不是乙個選擇器,(前提是都全中)
p{color:red!important; 只寫了乙個!important,所以就字型顏色屬性提公升權重,font-size沒有提公升權重。
font-size:100px;
#paral{
color:blue;
font-size:50px;
綜合來看字的顏色是red,字型大小是50px,因為!importation的權重最大,所以是red,但是#的權重大於標籤的權重,所以字型大小的大小是50px.
2)!important無法提公升繼承的權重,該是0還是0
hahah
有css樣式
div{
color:red!important;
p{color:blue;
由於div是通過繼承性來影響文字顏色的,所以important無法提公升它的權重。權重是0,幹不過p標籤,因為p標籤是實實在在的選擇的,所以字的顏色是藍色。
3)!important不影響就近原則
如果大家都是繼承的,按理說應該按照就近原則,那麼important能不能影響就近原則呢?
回答是:不能,不能給乙個描述的遠的加!important來提高權重。
04 css的繼承性和層疊性,層疊性權重相同處理
css有兩大特性 繼承性和層疊性 物件導向語言都會存在繼承的概念,在物件導向語言中,繼承的特點 繼承了父類的屬性和方法。那麼我們現在主要研究css,css就是在設定屬性的。不會牽扯到方法的層面。繼承 給父級設定一些屬性,子級繼承了父級的該屬性,這就是我們的css中的繼承。記住 有一些屬性是可以繼承下...
CSS 繼承性和層疊性
繼承性 有一些屬性,當給自己設定的時候,自己的後代都繼承上了,如color text 開頭的 line 開頭的 font 開頭的。type text css divstyle head 我是段落p 我是段落p 我是段落p div body 不是所有屬性都能夠繼承,如上圖,color屬性會被繼承,但b...
css 繼承性和層疊性
css有兩大特性 繼承性和層疊性 物件導向語言都會存在繼承的概念,在物件導向語言中,繼承的特點 繼承了父類的屬性和方法。那麼我們現在主要研究css,css就是在設定屬性的。不會牽扯到方法的層面。繼承 給父級設定一些屬性,子級繼承了父級的該屬性,這就是我們的css中的繼承。記住 有一些屬性是可以繼承下...