css3選擇器總結

2021-07-24 17:55:56 字數 1435 閱讀 1779

繼承性:子標籤繼承父標籤樣式,預設優先順序最低。

有繼承性:文字相關字型樣式、粗細、大小、顏色、型別等

無繼承性:盒子模型相關邊框、背景等

層疊性:相同標籤繼承和定義的樣式累加到一起互不衝突。

優先順序:離標籤越近的選擇器優先順序越高,所以相同權重的樣式後者才生效;內聯樣式表》頭部樣式表》匯入樣式表。

權重為0000:

通用選擇器

* {}

組選擇器h1, h2, p, em, img {}

後代選擇器h1 em{}

子代選擇器table>tbody>tr{}

分類選擇器div.top,header.main{}

+相鄰兄弟選擇器: div.s+p{} 只能選擇後面的

~通用兄弟選擇器: div.s~p{} 只能選擇後面的

權重為0001:

標籤選擇器

h3 em {}

:first-letter每段首字元(css2不相容,css3相容)

:first-line每行首字元

當:first-letter和:first-line矛盾時優先:first-letter

:before

:after

:content

::selection使用者在頁面中選中部分(只能改顏色和背景顏色)

權重0010:

類(class)選擇器 .special {}

偽類選擇器:  :link   :visited   :hover   :active   :focus

元素狀態偽類:   :enabled   :disabled   :checked   :focus

屬性選擇器:[屬性]   元素[屬性][屬性]   元素[屬性=「value」]

p=[class^=」value」] p=[class*=」value」] p=[class$=」value」]

元素[class~=」value」]匹配class=」c1 c2 c3 c4」眾多值中某乙個

目標偽類:img:target{}匹配id或name的value,寫在跳轉目標的標籤後

:target{} 點此跳此

結構偽類:(父元素下的子元素中,必須先選中父元素)

:first-child    :last-child    :nth-child(n)

:nth-child(even|2n)選擇偶數子元素 :nth-child(odd|2n-1)//奇數

:empty 空格換行不算空,匹配同級元素中乙個子元素都沒有的元素

:only-child匹配同級元素中只有乙個子元素的元素

否定偽類::not()

權重0100:

id選擇器 #banner

權重1000:

!important p

this is my first blog.

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

css3選擇器總結

選擇器分為 共分為10種 基本選擇器 萬用字元 元素選擇器 e id選擇器 id 類選擇器 class 群組選擇器 selectori,selectorv 瀏覽器對選擇器都可使用 層次選擇器 後代選擇器 e f 子選擇器 e f 相鄰兄弟選擇器 e f 通用選擇器 e f 偽類選擇器 一般有 lin...

CSS3選擇器總結

一,css3 選擇器分類 二,選擇器語法 1,基本選擇器語法 選擇器型別 功能描述 通配選擇器 選擇文件中所以html元素 e元素選擇器 選擇指定型別的html元素 idid選擇器 選擇指定id屬性值為 id 的任意型別元素 class 類選擇器 選擇指定class屬性值為 class 的任意型別的...