## css 權重 | 類型 | 權重 | | --- | --- | | ! important | 無窮 | | 行間樣式 | 1000 | | id | 100 | | class/屬性選擇器/偽類:hover | 10 | | 標簽選擇器/偽元素:after | 1 | | 通配符 | 0 | *通配符 | 類型 | 描述 | | --- | --- | | \[abc^="def"\] | 選擇 abc 屬性值以 "def" 開頭的所有元素 | | \[abc$="def"\] | 選擇 abc 屬性值以 "def" 結尾的所有元素 | | \[abc\*="def"\] | 選擇 abc 屬性值中包含子串 "def" 的所有元素 | 如：[id*=box] 指的是id包含box的idDOM結點都會被處理 注意：*[title = 'xxx'] 表示此頁面所有的DOM元素title屬性為xxx ## css 選擇器 * 1、元素選擇器 >元素選擇器是比較常見的一種選擇器 如：p,h2,span,a,div等 * 2、id 選擇器 >權重較高，書寫方式是#xxx，一般用戶錨點和一些需要特殊處理的DOM元素 * 3、類選擇器 >用到的比較多 ，比如.xx，指的是此頁面所有的類名為xx的DOM元素 * 4、同級選擇器 >用戶多個元素共用一類屬性 ``` h1, p { background：red } 注：指的是此頁面所有的h1和p標簽的背景為red ``` * 5、后代選擇器 >兩個選擇中間用空格隔開 ``` div p{ background：red } 注：指的是在所有div下面的p標簽對應的DOM元素背景顏色都為紅色 ``` * 6、子元素選擇器 >兩個選擇器用 > 隔開 ``` div>p{ background：red } 注：指的是在div下面的親子代（第一層）的所有p標簽都需要背景為紅色 ``` * 7、兄弟選擇器 + >如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器 中間用+隔開 ``` div+p{ background：red } 注：指的是在di同級后面的相鄰p標簽DOM元素的背景都為紅色 tips:在處理同種向左margin的時候，但是第一個元素不動，你就可以用到， 直接兩個相同的元素相加 如：button+button 提醒------兄弟選擇器+器則表示某元素后相鄰的兄弟元素，也就是緊挨著的 ``` * 8、兄弟選擇器 ~ >和+不同的是，~強調同級后級后面的所有符合條件的元素 ``` div~p{ background：red } 注：指的是在di同級后面的所有p標簽DOM元素的背景都為紅色 ``` * 9、屬性選擇器 >表示的是擁有此屬性的此標簽 ``` img[alt] { border: 5px solid red; } 注：表示的是所有擁有alt屬性的imgDOM元素 input[type = "text"]{ border: 1px solid red } 注：表示所有input標簽的type值為text的DOM元素 ``` * 10、偽類選擇器 >一般是選擇器后面加：如：:hover :not :first-child :lang :last-child :nth(2)-child :enabled :disabled :checked等 ``` a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #00FF00} /* 鼠標移動到鏈接上 */ a:active {color: #00FF00} /* 選定的鏈接 */ ``` ``` q:lang(no) { quotes: "~" "~" } <p>文字<q lang="no">段落中的引用的文字</q>文字</p> 注：:lang 類為屬性值為 no 的 q 元素定義引號的類型 ``` >first-child 表示父元素第一個元素 last-child 表示父元素最后一個元素 nth-child(n) 表示父元素的第幾個元素 nth-last-child(n) 表示 父元素的從最后開始數的第幾個元素 注意：這些表示的是相對于父元素，比如 `p:first-child` 但是p標簽不是其父元素的第一個元素標簽，則不做渲染，參照其父元素