css選擇器優先順序和頁面布局及css拓展

2021-08-07 03:11:47 字數 1277 閱讀 3696

今天學習了css選擇器的優先順序和關於ps的一些介面快捷鍵和一些用法,然後通過對100度享樂網的布局使我們對布局的意識更加清晰。

關於css選擇器的優先順序:作用的元素相同,樣式相同就會出現優先順序問題。

當優先順序相同的時候,**發生衝突時後面的**覆蓋前面的**

不同選擇器發生衝突時,優先順序高的選擇器覆蓋優先順序低的

通配選擇器 0

*標籤名選擇器 1

*類選擇器 10 優先順序絕對高於標籤名選擇器

*id選擇器 100 優先順序絕對高於類選擇器

*後代選擇器 選擇器1 選擇器2 選擇器3...(優先順序會有相加的過程)

*群組選擇器 選擇器1,選擇器2,選擇器3...(不會有優先順序相加的過程)

可以通過css選擇器的優先順序由高到低進行排列:

1.無條件優先的屬性只需要在在屬性後面加上!important,他會覆蓋頁面內任何定義的元素樣式,但要慎用,使用的時候記得加注釋說明一下。

2.第二是在html中給元素中加style,但次方法有違文件中結構與樣式分離的規範,不利於維護

3.第三是id選擇器

4.第四級的屬性由乙個或多個 類選擇器、屬性選擇器、偽類選擇器定義。

5.第五是標籤選擇器

6.第六是通配選擇器

command + h 是否顯示額外內容(參考線);

v 移動工具

m 選取工具

z 放大鏡工具 按住alt切換到縮小

t 取色

command+shift+c 強複製

command+ n 新建圖層

command+shift+ alt +s 儲存

command+ v 貼上

100度頁面布局

頁面布局

拓展: reset.css

什我們可以把它叫做css重設,也有人叫做css復位、預設css、css重置等。css重設就是由於各種瀏覽器解釋css樣式的初始值有所不同,導致設計師在沒有定義某個css屬性時,不同的瀏覽器會按照自己的預設值來為沒有定義的樣式賦值,所以我們要先定義好一些css樣式,來讓所有瀏覽器都按照同樣的規則解釋css,這樣就能避免發生這種問題。

normalize.css

保護有用的瀏覽器預設樣式而不是完全去掉它們

一般化的樣式:為大部分html元素提供

修復瀏覽器自身的bug並保證各瀏覽器的一致性

優化css可用性:用一些小技巧

解釋**:用注釋和詳細的文件來

CSS選擇器及優先順序

css優先順序的計算公式 通常我們可以將css的優先順序由高到低分為六組 無條件優先的屬性只需要在屬性後面使用 important 它會覆蓋頁面內任何位置定義的元素樣式。當然,ie 6不支援這個屬性,於是它也成為一種hack被很多人所熟知,真正使命被人淡忘。第二高位的優先屬性是在html中給元素標籤...

CSS選擇器及優先順序

css選擇器 css選擇器優先順序 解釋 對一種有標識的內容進行樣式變化 標籤選擇器 對應的標籤檔案所有對應的標籤都會被選擇修飾 選擇器名 標籤 類選擇器 標籤內的屬性 class 值 選擇器名 class 顧名思義,是一類的內容使用同一種樣式 id選擇器 標籤內的屬性 id 值 選擇器名 id i...

css選擇器及優先順序

後代選擇器 div p 選擇div元素裡面的所有p元素 子選擇器 div p 選擇父元素為div的所有p元素 同胞選擇器 div p 選擇所有緊跟在div之後的p元素 組選擇器 div,p 選擇所有的div和p元素 共同選擇器 div.name 選擇所有類名為name的div元素。即同時滿足 此外還...