css選擇器 有通配符選擇器書寫格式:*+{聲名塊} 並集選擇器/組合選擇器 書寫格式;元素或類或id+“”+元素或類或id+“,”+元素或類或id{聲明塊} 列:h1,h2,h3{color:red;} 層次選擇器 : 子集選擇器: 格式:父級元素名稱+">"+子級元素名稱+{聲明塊} 例:div ...
css選擇器 有通配符選擇器書寫格式:*+{聲名塊} 並集選擇器/組合選擇器 書寫格式;元素或類或id+“”+元素或類或id+“,”+元素或類或id{聲明塊} 列:h1,h2,h3{color:red;} 層次選擇器 : 子集選擇器: 格式:父級元素名稱+">"+子級元素名稱+{聲明塊} 例:div>p{color:red;} 後代選擇器: 格式:祖先元素名稱+空格+後代元素名稱+{聲明塊} 例:div p{color:red;} 兄第選擇器: 格式: A元素名稱+"+"+B元素名稱+{聲明塊} 例:div+P{color:red;} 註:選擇A元素後的B元素,AB之間不許有其他元素. 通用選擇器: 格式:同級元素A+"~"+同級元素B+{聲明塊} 例:div~p{color:red;} 註:表示選擇與A元素同級別的所有B元素(B的位置是在A後面)。 偽類選擇器 動態偽類選擇器未訪問 (把預設值改為黑色); a:link{color:black;} 滑鼠懸停 a:hover{color:pink;} 滑鼠點擊時 a:active{color:green;} 點擊後 a:visited{color:五顏六色;}; 註:hover是可以用於多個元素身上的,但其他三個只能用於具有點擊功能的元素上。 a:focus{color:顏色;} 多用於輸入框或鏈接(註:IE7以前不支持:focus註;IE6以前不支持:hover :active) 以上5個的順序要求: A:link,visited,focus,hover,active B:visited,link,focus,hover,active 結構偽類選擇器 格式:元素名稱+":nth-child(n)"+{聲明塊} 例:section:nth-child(2){color:deeppink;} 表示選中html里的第二個section元素,文字設置為deeppink 選中第一個 格式:元素名稱+":first-child"+{聲明塊} 例:p:first-child{color:red;} 選中最後一個 格式:元素名稱+":last-child"+{聲明塊} 例:p:last-child{color:red;} 選中奇數項 格式:元素名稱+":nth-child(odd)"+{聲明塊} 例:section:nth-child(odd){color:red;} 選中偶數項 格式:元素名稱+":nth-child(even)"+{聲明塊} 例:section:nth-child(even){color:red;} 偽元素選擇器 元素後面加內容 格式:元素名稱+":after"+{content:"要添加的內容";} 例:i:after{content:"姓名";} 元素前面加內容 格式:元素名稱+":before"+{content:"要添加的內容";} 例:i:before{content:"姓名";} 元素第一行添加樣式 格式:元素名稱+":first-line"+{聲明塊} 例:p:first-line{color:red;} 元素第一個字母或第一個漢字 格式:元素名稱+":first-letter"+{聲明塊} 例:p:first-letter{color:red;} 註:為瞭解決相容性,偽元素選擇器,建議打兩個冒號