漸進增強:(從小到大)
先保證最基本的功能 ~> 使用者體驗的提公升
優雅降級:(從大到小)
先針對版本較高的裝置進行專案構建,保證使用者體驗的完美 ~>犧牲一些效果,保證最基本的功能
選擇器(選擇符):
id class 型別(div span...) 後代選擇器 偽類選擇器 偽元素選擇器...
屬性選擇器:
e[attr] 選中e元素,且e元素有attr屬性
e[attr="value"] 選中e元素,且e元素有attr屬性,值為value
e[attr~="value"] 選中e元素,且e元素有attr屬性,包含值value
e[attr^="value"] 選中e元素,且元素有attr屬性,以value值開頭
e[attr$="value"] 選中e元素,且有attr屬性,以value值結尾
e[attr*="value"] 選中e元素,且有attr屬性,包含value值
e[attr|="value"] 選中e元素,且有attr屬性,僅有value值,或者以value-開頭
結構偽類選擇器:
:first-child{} 選中第乙個元素
:last-child() 選中最後乙個元素
:nth-child(n){} n是從0開始的,
2n 偶數列 even
2n-1 奇數列 odd
:only-child{} 選中只有本身乙個同級的元素
:nth-last-child(n){} 倒數第n個元素
所有小孩中的第乙個 first-child{}
未分類 p1是第乙個
span4是第四個
男孩中的第乙個 first-of-type{}
分類後 p1是第乙個
女孩中的第乙個 first-of-type{}
分類後 span4是第乙個
有很多同級元素,但是只有乙個a標籤 :only-of-type{}
沒有其他同級元素,只有乙個a標籤 :only-child{} ui
偽類 :enabled{} 選中可以輸入的元素
:disabled{} 選中不可輸入的元素
:checked{} 選中被選中的元素
::selection{} 被使用者選中的內容處於高亮的狀態
鏈結偽類選擇器
:link{} 初始狀態
:visited{} 訪問過後的狀態
使用者行為選擇器
:hover{} 滑鼠移入的狀態
:active{} 滑鼠按下的狀態
:focus{} 選中獲取了焦點(游標在**跳動)的元素
選中後代,不論是兒子還是孫子,都選中box 下的 所有 a 都會被選中*/
.box a
選中兒子,孫子不會被選中
.box>a
直選中緊跟在p後的第乙個a (只能選中乙個)
p + a
選中p標籤後的所有 a (可以選中多個)*/
p ~ a
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...
CSS3選擇器 屬性選擇器
指定屬性名，但沒有確定任何屬性值 type text css div div title style div1div title name div2div title age div3div body 指定屬性名，並指定了該屬性的屬性值 其他 與上述相同 div title name 指定屬性名，具...