CSS3學習筆記 選擇器

2021-08-08 02:16:46 字數 1087 閱讀 8563

css3 選擇器

1.1屬性選擇器

e[attr ^="value"] 指定屬性名,找到以value開頭的屬性值

e[attr$="value"] 指定屬性名,找到以value結尾的屬性值

e[attr*="value"] 指定屬性名,找到包含value開頭的屬性值

1.2為類選擇器

1.2.1 使用者介面相關的

e:enabled{}:元素被啟用的時候觸發,比如輸入框獲取焦點

e:disabled{}:元素被禁用的時候觸發,比如輸入框不可獲取到焦點

e:checked{}:當元素被選中的時候觸發,比如radio或checkbox元素的選中

e:selection{}:選中的時候觸發,比如一大坨文字被選中的時候,給選中的文字設定字型

注意:::selection

選擇器匹配被使用者選取的選取是部分。

只能向

::selection

選擇器應用少量

css

屬性:color

、background

、cursor

以及outline

1.2.2 結構性偽類

:root,在html文件中,就是html元素

body的高度到底是啥???當我們沒有對html元素設定背景顏色的時候,html會自動 讀取body的背景顏色。

e:empty:當乙個元素沒有內容(沒有子元素)的時候觸發。

e:nth-child(4){}:所有元素的父元素的第index孩子,孩子的編號號是從1開始,同時編號的順序不管 什麼型別的元素標號依次遞增。

e:nth-of-type(index){}:所有元素的父元素的第index孩子,還在的編號根據一型別的元素進行編號,如果子元素有多種元素(div、h3、p),那麼就有多組編號

e:first-of-type{} == nth-of-type(index){}

e:list-of-type == e:nth-of-type(最後乙個){}

css3學習筆記 css3選擇器

e attr 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 css ul,li lihtml class linksitem id...

CSS3學習筆記 選擇器

類選擇器 class classname classname 選取class為classname的元素 p.chassname 選取p標籤中class為classname的元素 classname1.classname2 選取同時擁有.classname1和.classname2的元素 id選擇器 ...

css3 選擇器 CSS3選擇器

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