day 4 偽元素 選擇器的優先順序 繼承

2021-08-20 11:22:26 字數 1722 閱讀 4342

偽元素名稱

描述用法以及注意事項

::after

用來建立乙個偽元素,做為已選中元素的最後乙個子元素

通常會配合content屬性來

為該元素新增裝飾內容。

這個虛擬元素預設是行內元素

::before

用來建立乙個偽元素,其將成為匹配選中的元素的第乙個子元素

通常會配合content屬性來

為該元素新增裝飾內容。

這個虛擬元素預設是行內元素

::first-letter

選中某 block-level element(塊級元素)第一行的第乙個字母,

並且文字所處的行之前沒有其他內容(如和內聯的**)

1)首字元之前或緊跟首字元

的標點符號在偽元素匹配範圍內

2)::before 偽元素 和 content 

屬性結合起來有可能會在元素前

面注入一些文字也會被該為元素選中

::first-line

first-line偽元素在某 block-level element

(塊級元素)的第一行應用樣式。

1)text-indent 在 first-line 偽元素

上無效2)margin 在 first-line 偽元素上無效

::selection

selection偽元素應用於文件中被使用者高

亮的部分

只有一小部分

css屬性可以用於 

: :selection 選擇器:

color, background-color,cursor,

outline, text-decoration, t

ext-emphasis-color和text-shadow。

::backdrop

是在任何處於全屏模式的元素下的即刻渲染的盒子(並且在所有其他在堆中的層級更低的元素之上)

層疊三個原則:

重要性(importance)

專用性(specificity)

源**次序(source order)

繼承1)inherit: 該值將應用到選定元素的屬性值設定為與其父元素一樣。

2)initial :該值將應用到選定元素的屬性值設定為與瀏覽器預設樣式表中該元素設定的值一樣。如果瀏覽器預設樣式表中沒有設定值,並且該屬性是自然繼承的,那麼該屬性值就被設定為 inherit。

3)unset :該值將屬性重置為其自然值,即如果屬性是自然繼承的,那麼它就表現得像 inherit,否則就是表現得像 initial。

4)revert :如果當前的節點沒有應用任何樣式,則將該屬性恢復到它所擁有的值。換句話說,屬性值被設定成自定義樣式所定義的屬性(如果被設定), 否則屬性值被設定成使用者**的預設樣式。

注意:initial 和 unset 不被ie支援

最後可以用all來實現對所有可以繼承的屬性進行繼承  屬性值有:inherit, initial, unset, revert

元素或者偽元素選擇器----權值為1

類選擇器、屬性選擇器或者偽類----權值為10

id選擇器----權值為100

將樣式宣告在style中----權值為1000

!important----是該條屬性具有最高優先順序

權值相同的情況下----就用**次序原則(即就近原則)誰裡元素越近優先順序就越高

css 選擇器 優先順序 偽類 偽元素

內聯樣式 id 選擇器 類選擇器 屬性選擇器 偽類選擇器 標籤選擇器 偽元素選擇器 如何計算 計算選擇符中 id 選擇器的個數 a 計算選擇符中類選擇器 屬性選擇器以及偽類選擇器的個數之和 b 計算選擇符中標籤選擇器和偽元素選擇器的個數之和 c 按 a b c 的順序依次比較大小,大的則優先順序高,...

選擇器優先順序 CSS選擇器優先順序總結

css選擇器優先順序這個問題,相信有點經驗前端都會認為非常簡單,但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧,一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表,為了保持不同瀏覽器下樣式相同,所以我們的自定義樣式表一般都會覆...

選擇器,優先順序

內聯式css樣式表就是把css 直接寫在現有的html標籤中,如下面 這裡文字是紅色。盡量不要把css 寫成內部樣式 縮排統一。2.嵌入式css樣式,就是可以把css樣式 寫在標籤之間。3.外部式css樣式 也可稱為外聯式 就是把css 寫乙個單獨的外部檔案中,這個css樣式檔案以 css 注意 1...