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]