資訊專欄INFORMATION COLUMN
摘要：子選擇符的子元素同胞選擇符和在后面就行必須緊跟非子選擇符所有是元素孫子的元素選擇器屬性選擇器標簽名屬性屬性值偽類選擇器動態事件，狀態改變被訪問過的鏈接偽類鏈接偽類。換句話說，如果選擇符更明確特指度更高，無論它在哪里，都會勝出。
類型，類和ID選擇器
帶有空格的字體名稱要用""引起來
對選擇器分組可使同一規則適用于多個選擇器，例子如下
th,td {
padding:0 10px 00;
}
選項的優先級
h1 {
font-family:"Times New Roman",serif;
}
//先選用前者，沒有前者，再使用后者
類型名與類名中間不應有空格 div.btn-success
通用選擇器*，適用于文檔所有元素
* {
font-family:Arial;
}
后代選擇器
div.planet table td {
padding:0 10px 0 0;
}
//是類為planet的div元素的后代table的后代的td樣式
萬萬牢記，上下文選擇符以空格作為分隔符，而分組選擇符則以逗號作為分隔符，不要弄混。
子選擇符>
section > p{
font-style:Italic;
}
//section的子元素p
同胞選擇符～和+
section ~ p {
font-style:Italic;
}
//p在section后面就行
section + p {font-style:Italic;}
//p必須緊跟section
非子選擇符
selection * a {
***;
}
//所有是selection元素孫子的a元素
ID選擇器 #
屬性選擇器標簽名[屬性="屬性值"]
img[title="hh jj"]{...}
偽類選擇器：動態事件，狀態改變
a:visited {
color:mangenta;
}
//被訪問過的鏈接
UI偽類
Link。此時，鏈接就在那兒等著用戶點擊。
Visited。用戶此前點擊過這個鏈接。
Hover。鼠標指針正懸停在鏈接上。
Active。鏈接正在被點擊（鼠標在元素上按下，還沒有釋放）。
input:focus {border:1px solid blue;}
More Information //位于頁面其他地方、ID 為 more_info 的那個元素就是目標。該元素可能是這樣的：結構化偽類This is the information you are looking for.
//那么，如下 CSS 規則 #more_info:target {background:#eee;}
first-child 一組同胞元素的第一個
last-child
nth-child(3) 一組同胞元素的第三個
偽元素——似有實無的元素first-letter
first-line
before 和 after
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
//在類為age的p元素前面增加一段Age：
p::first-letter {font-size:300%;}
//放大p的第一個字母
繼承和層疊
瀏覽器默認樣式表
用戶樣式表
作者鏈接樣式表（按照它們鏈接到頁面的先后順序）
作者嵌入樣式
作者行內樣式
越后面優先級越高
規則一：包含 ID 的選擇符勝過包含類的選擇符，包含類的選擇符勝過包含標簽名的選擇符。
規則二：如果幾個不同來源都為同一個標簽的同一個屬性定義了樣式，行內樣式勝過嵌入樣式，嵌入樣式勝過鏈接樣式。在鏈接的樣式表中，具有相同特指度的樣式，后聲明的勝過先聲明的。
規則一勝過規則二。換句話說，如果選擇符更明確（特指度更高），無論它在哪里，都會勝出。
規則三：設定的樣式勝過繼承的樣式，此時不用考慮特指度（即顯式設定優先）。下面簡單解釋一下規則三。比如下面的標記
Inheritance is weak in the Cascade
和下面的規則
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2（高特指度）
會導致單詞“weak”變成藍色，因為它從父元素 p 那里繼承了這個顏色值。
但是，只要我們再給 em 添加一條規則
em {color:red;}
0 - 0 - 1 （低特指度）
em 就會變成紅色。因為，雖然它的特指度低（0-0-1），但 em 繼承的顏色值，會被為它明確（顯式）指定的顏色值覆蓋，就算（隱式）遺傳該顏色值的規則的特指度高（2-0-2）也沒有用。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110971.html
摘要：國內各大公司都已經投入使用，在一些常見的網站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及，這里推薦閱讀同學寫的專題文章。 前言 CSS代碼難維護眾所皆知。 為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現； 作用于某個元素上的樣式又可能來自單個樣式規...
摘要：國內各大公司都已經投入使用，在一些常見的網站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及，這里推薦閱讀同學寫的專題文章。 前言 CSS代碼難維護眾所皆知。 為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現； 作用于某個元素上的樣式又可能來自單個樣式規...
摘要：為了讓包圍列表項，沒有使用，而是使用了，是因為前者會導致后來添加到下拉菜單中的子菜單無法顯示它們最終會顯示在父元素的外面，結果會導致溢出而被隱藏。它與父元素之間的間隙，實際上下拉菜單中第一個鏈接的邊框。 菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來分組鏈接不僅符合邏輯，而且即使沒有額外的 CSS 也能適當顯示鏈接的層次。默認情況下，由于列表（li）是塊級元素...
摘要：為了解決沖突，確定哪條規則勝出并最終被應用，提供了三種機制繼承層疊和特指。整個檢查更新過程結束后，再將每個標簽以最終設定的樣式顯示出來。層疊規則四順序決定權重。規則三設定的樣式勝過繼承的樣式，此時不用考慮特指度即顯式設定優先。 為了解決沖突，確定哪條規則勝出并最終被應用，CSS提供了三種機制：繼承、層疊和特指。 1.繼承 CSS 中的祖先元素會向后代傳遞一樣東西：CSS屬性...
摘要：規則命名慣例規則由選擇符和聲明兩部分組成，其中選擇符用于指出規則所要選擇的元素，聲明則又由兩部分組成屬性和值。用于選擇作為指定祖先元素后代的標簽。維基百科在其引證中大量使用了偽類。維基百科的引證鏈接就是正文里那些不起眼的數字鏈接。 1.為文檔添加樣式的三種方法 行內樣式（寫在特定 HTML 標簽的 style 屬性里） 嵌入樣式（嵌入的 CSS 樣式是放在 HTML 文檔的 hea...
閱讀 4693·2021-11-18 13:23
閱讀 896·2021-09-22 15:24
閱讀 1920·2021-09-06 15:00
閱讀 2619·2021-09-03 10:30
閱讀 1278·2021-09-02 15:15
閱讀 2056·2019-08-30 15:54
閱讀 3030·2019-08-30 15:44
閱讀 1449·2019-08-29 15:12
