html/css-css選擇器-2~5
優先級別
和先後沒關係
!important在color和;之間,不建議用,會打亂 >內聯樣式(括號裡style=“”)>外聯:ID(#ID)> 類(.cls)>元素(h1) >萬用字元(*)
層級選擇器:後代 子 相鄰兄弟
<html lang="en"> <head> <meta charset="UTF-8"> <title> 層級選擇器 </title> <style> #p1 h1{color: red} *後代選擇器 #p1 > h1{color: red} *子選擇器 #p1 + h1 {color:purple}*相鄰兄弟選擇器,下一個兄弟選擇器 #p1 ~ h1 {color:purple}*普通兄弟選擇器:後面的兄弟都變了 </style> </head> <body> <p id="p1"> *換成div才行 p寫起來有問題後面說!! <h1>jdsjf </h1> sdjfj </p> <h1>jkdf<h1> *不顯示,因為不是p後代 </body> <html>
html body p h1
head meta+title
元素之間的3種關係:
1 父級和子級的關係
2 兄弟之間的關係 title和p不算,得有相同父級
3 祖先和後代的關係
用法根據HTML元素之間的層級關係來使用,語法: 祖先元素 後代元素 {屬性名 屬性值} div em{color: red;} {}為宣告塊
分為子選擇器和後代選擇器,還有相鄰兄弟選擇器和普通兄弟選擇器
難點:關係
疑問:為什麼div h1比#p1大
注意:大小寫不要錯 ,;不要忘了
屬性選擇器 {屬性名稱}
用法多而近,作用:在指定範圍通過是否具有指定屬性篩選實際開發中,屬性選擇器配合基本選擇器使用
注意:p和[name]不能有空格
示例:
p[name] {color:indigo;}
[name] {color:indigo;} 速度會比較慢
常見擴充套件用法(1-4):
1.[屬性名稱=屬性值] 完全一致
2.[屬性名稱^=屬性值] 屬性值以什麼開始的
3.[屬性名稱$=屬性值] 屬性值以什麼結束的
4.[屬性名稱*=屬性值] 屬性值包含什麼
5.[屬性名稱~=屬性值] 屬性值以空格為分隔符,分割後的值至少有一個和限定匹配
6.[屬性名稱|=屬性值] 屬性為value或以value-開頭 | shift+enter上面那個
組合選擇器:包括層級選擇器
1.多個並列使用,中間用,分隔 #p,.cls
2.多個並列使用,無分隔符 p[name]