前端必會css整理

2022-08-23 02:57:12 字數 1353 閱讀 8954

1.設定css樣式的三種方式?

外部樣式表,引入乙個外部css檔案

內部樣式表,將css**放在標籤內部

內聯樣式,將css樣式直接定義在html元素內部

2.css有哪些選擇器?

id選擇器

類選擇器

標籤選擇器

又可以細分為:

派生選擇器(包括後代選擇器、子元素選擇器、相鄰兄弟選擇器)

偽元素選擇器

屬性選擇器

群組選擇器

萬用字元選擇器

css優先順序定義?

一般而言,選擇器越特殊指向越準確,優先順序越高;

計算方法:

標籤選擇器優先順序為1

類選擇器優先順序為10

id選擇器優先順序為100

行內樣式優先順序為1000

!important 無限大;

(c附:ss選擇器執行效率與相容性詳列:

3.css中屬性定義,使得dom元素不顯示在瀏覽器可視範圍內?

1.display屬性為none、visibility設為hidden(但是仍然佔據頁面空間)

2.設定寬高為0/透明度0/z-index位置-1000(附:該屬性僅在定位元素中生效);

(附:display:none和visibility:hidden的區別)

display:隱藏對應的元素不佔據原來的空間。visibility:隱藏對應的元素仍佔據空間位置。

4.超連結訪問過後hover樣式就不出現?如何解決?

改變css屬性的排列順序(lvha)link visited hover active

5.css hack的原理?

由於不同的瀏覽器和瀏覽器各版本對css的支援及解析結果不一樣,以及css優先順序對瀏覽器展現效果的影響,我們可以據此針對不同瀏覽器情景來應用不同的css。

css hack的分類?

css hack有三種表現形式,css屬性字首法、選擇器字首法以及ie條件注釋法(即頭部引用if ie)。實際專案中css hack大部分是針對ie瀏覽器不同版本之間的表現差異而引入的。

5.1屬性字首法:

例:ie6能識別下劃線「_」和星號「*」,ie7能識別星號「*」(以上版本並不支援),但不能識別下劃線「_」,ie6~ie10都認識「\9」,但是其他瀏覽器不能支援(也就是說可以利用這個特性噁心一下還在使用老版本的使用者,哈哈)(「\9」測試**

5.2選擇器字首法(選擇器hack)

例:ie6能識別*html .class{},ie7能識別*+html .class{} 或者*:first-child+html .class{};

5.3ie條件注釋法:

針對所有ie(ie10+已經不再支援條件注釋):,針對ie6及以下版本: