CSS：基本概念、选择器、伪类伪元素
基本概念
HTML使用結構化標記的理由：易于建立內容索引、增加文檔可用性、增加可訪問性、易于維護。
?元素（element）：文檔結構的基礎，每個元素生成一個框（box）其中包含元素的內容，
元素的兩種形式：替換和非替換
替換元素（replaced element）：用來替換元素內容的部分并非由文檔內容直接表示，e.g. img, radio button, checkbox, text input box.
非替換元素（nonreplaced element）：內容由用戶代理（瀏覽器）在元素本身生成的框中顯示，e.g. <span>、段落、標題、表單元格、列表。
元素的兩種基本類型：塊級元素和行內元素
塊級（block-level）元素：默認生成填充其父元素內容區的元素框，在元素框前后生成分隔符，旁邊不能有其他元素，如<p>、<div>。
行內（inline-level）元素：在一個文本行內生成元素框，不會在元素框前后生成分隔符打斷文本，所以不會破壞父元素的顯示，如<a>、<strong>、<em>。
HTML和XHTML中塊級元素不能嵌套在行內元素中，而CSS對顯示角色的嵌套不存在限制，因為可以改變元素的顯示角色，如：
p {display: inline;} em{display: block;}?一般情況下display默認值為Inline。
?
應用樣式表鏈接外部樣式表（external style sheet）：
1. link標記?鏈接外部樣式表(external style sheet)，放在<head>元素內部。
<link rel="stylesheet" type="text/css" href="shee1.css" media="all" />2. style元素?document stylesheet / embedded stylesheet
<style type="text/css">...</style>2.@import directive? 放在style內部，位于其它CSS規則前。
<style type="text/css"> @import url(styles.css); h1 {color:gray;} </style>?
屬性釋義
rel：關系（relation）
rel屬性設置為alternate stylesheet時刻定義候選樣式表（alternate style sheet），只有在用戶選擇這個樣式表時才會用于文檔????? 表現，瀏覽器可根據link元素的title值生成候選樣式列表供用戶選擇。
?還可為不同候選樣式表指定相同的title值進行分組，如：
<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" media="screen" /> <link rel="stylesheet" type="text/css" href="print-sheet1.css" title="Default" media="print" /> <link rel="stylesheet" type="text/css" href="bigtext.css" title="Big Text" media="screen" /> <link rel="stylesheet" type="text/css" href="print-bigtext.css" title="Big Text" media="print" />?如果為一個rel為stylesheet的link指定了title，也就指定了該樣式表作為首選樣式表。而如果將一組樣式表都指定為首選樣式表（rel為stylesheet，出現title屬性），則只有其中一?個會真正作為首選樣式表，其它會被完全忽略。
如果沒有為樣式表指定title，將作為永久樣式表（persistent style sheet），始終用于文檔的顯示。
type：使用link標記加載的數據類型
href：樣式表的URL
media：可取值如下
?????????? 1. all應用于所有表現媒體
?????????? 2. aural 應用于語音合成器、屏幕閱讀器和文檔的其他聲音表現
????????? 3. braille 用Braille設備表現文檔時使用
?????????? 4. embossed 用Braille打印設備時使用
?????????? 5. handheld 用于手持設備，如個人數字助理或支持Web的蜂窩電話
?????????? 6. print 為視力正常的用戶打印文檔時及顯示文檔的“打印預覽”時使用
?????????? 7. projection 用于投影媒體，如顯示幻燈片的數字投影儀
?????????? 8. screen 在屏幕媒體（如桌面計算機監視器）中表現文檔時使用
?????????? 9. tty 在固定間距環境（如電傳打字機）中顯示文檔時使用
?????????? 10. tv 在電視上顯示文檔時使用
?在多個媒體中使用一個樣式表時，可在提供媒體列表時用逗號分隔，如：
<link rel="stylesheet" type="text/css" href="visual-sheet.css" media="screen, projection" />?
link標記必須放在head元素中，且不能放在其他元素（如title）內部，瀏覽器才能找到、加載樣式表并應用于文檔。
外部樣式表中不能包含XHTML或任何標記語言，只能有CSS規則和CSS注釋。
如果希望關聯多個樣式表，可使用多個href屬性不同的link標記，瀏覽器會加載并合并樣式表的規則并應用于文檔，如：
<link rel="stylesheet" type="text/css" href="basic.css" /><link rel="stylesheet" type="text/css" href="splash.css" />?
style元素：可包含樣式表，在文檔中單獨出現。如：
style元素一定要使用type屬性，始終以<style type=”text/css”>開頭，其后接一個或多個樣式，以</style>結束。
可為style元素指定media屬性，取值與link標記中相同。
Style標記開始和結束之間的樣式成為文檔樣式表（document style sheet）或嵌套樣式表（embedded style sheet）。
?
@import指令：可以使用@import指令包含多個外部樣式表鏈接，每個@import指令的樣式表都會加載并使用，無法指定候選樣式表。
因為外部樣式表不能包含任何文檔標記故不能使用link，所以@import指令對于外部樣式表使用其他外部樣式表中的樣式時特別有用。
可通過在樣式表的URL（絕對和相對URL都可用）之后列出媒體，限制導入樣式表應用于一種或多種媒體。如：
@import url(sheet2.css) all;@import url(blueworld.css) screen;@import url(zany.css) projection, print;import指令要放在style容器中，并放在樣式表開頭，其他CSS規則之前。如：
<style type="text/css">@import url(sheet2.css);h1 {color:maroon;}body {background:yellow;}</style>為避免較老的瀏覽器無法識別style標記導致將樣式聲明當做文本顯示，可將style中的樣式聲明包含在注釋標記中：
<style type="text/css"><!-- @import url(sheet2.css);h1 {color:maroon;}body {background:yellow;}--></style><!—html的注釋-->???? /*CSS的注釋*/
?
?
內聯樣式（inline style）：如果單獨為單個元素指定一些樣式，可以用style屬性設置內聯樣式，不需要外部或外部樣式表。如：
<p style="color:gray;">The most wonderful of all breakfast foods is the waffle--a ridged and cratered slab of home-cooked, fluffy goodness… </p>除body外部出現的標記（如head或title），style屬性可以與任何標記關聯。
一個內聯style屬性中只能放一個聲明塊，不能放整個樣式表，因此不能放@import和完整規則。
?
選擇器
CSS樣式表由一系列規則組成。
CSS的規則結構：由選擇器（selector）和聲明塊（declaration block）兩個基本部分組成，聲明塊由一個或多個聲明（declaration）組成，每個聲明是一個屬性-值對（property-value）。
?
?
值可以是一個關鍵字或該屬性可取關鍵字的一個列表。如果一個屬性值可以取多個關鍵字，關鍵字之間用空格分隔，如：
?
p {font: medium Helvetica;}?
用空格分隔的這些所有關鍵詞加在一起構成了當前屬性的值。
?
只有一種情況例外用(/)分隔關鍵字：font屬性中斜線/用于分隔設置元素字體大小和行高的關鍵字。如：
h2 {font:large/150% sans-serif;}?
選擇器分組：如果需要向多個元素應用同一樣式，可使用選擇器分組。使用逗號分隔多個選擇器，如：
h2,p {color:gray;}?
通配選擇符（universal selector）：*，可與任何元素匹配，等價于列出文檔中所有元素的一個分組選擇器，如：
* {color:red;}?
聲明分組：如果需要向同一元素應用多個樣式，可使用聲明分組，在各個聲明后使用分號，如：
h1 {font:18px Helvetica; color:purple; background:aqua;}選擇器分組和聲明分組也可結合使用。
?
類選擇器（class selector）：常用于向文檔中已經以某種獨立于文檔元素的方式標記的部分應用樣式，而不考慮具體設計哪些元素。（.）標記這是類選擇器。
如：
將需要標記的元素的class屬性指定某個值（例中為warning），將類選擇器的樣式與元素關聯
<p class="warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p><p>With plutonium, <span class="warning">the possibility of implosion is very real, and must be avoided at all costs</span>. This can be accomplished by keeping the various masses separate.</p>結合選擇器向向歸類的元素應用樣式：
*.warning {font-weight:bold;} //應用到class屬性為warning的所有元素通用類選擇器：也可以忽略通配選擇器，應用到class屬性為所選類名的所有元素。如：
.warning {font-style:italic;}元素特定類選擇器：應用到class屬性為所選類名的所有指定元素。如：
p.warning {font-weight:bold;}多類選擇器：應用到class屬性包含所選詞列表的元素。如：
將特定元素的class屬性指定多個值，用空格分隔，順序不限
<p class="warning urgent">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>除應用單個標記的樣式外，如果需要為同時匹配多個標記的元素添加新樣式，可使用多類選擇器，用(.)分隔。如：
//標記含warning urgent的元素會除bold和italic外還有silver背景的樣式.warning {font-weight:bold;}.urgent {font-style:italic;}.urgent.warning {background:silver;} //鏈接多個類選擇器可以選擇同時包含這些類名的元素?
ID選擇器：(#)標記，引用id屬性中的值，將樣式應用到id屬性包含指定值的所有元素。如：
*#lead-para {font-weight: bold;}可以忽略統配選擇器，
#lead-para {font-weight: bold;}效果一樣。
<p id="lead-para">This paragraph will be boldfaced.</p><p>This paragraph will not be bold.</p>?
?
可獨立于元素來選擇ID，如已確定文檔中會出現某個特定ID值但不知道會出現在哪個元素，可聲明獨立ID選擇器：（例中ID值為mostImportant）
#mostImportant {color:red; background:yellow;} <h1 id="mostImportant">This is important!</h1>該id在文檔中只會出現一次
?
class和ID的區別：
使用類選擇器可以為任意多個元素指定類，而ID選擇器只能使用一次，不能為不同元素分配同一ID值；
ID選擇器不能結合使用，ID屬性不允許有以空格分隔的詞列表；
(.)加類名的標記法對XML文檔不一定有效，而(#)加ID的標記法在任何文檔語言中都能使用，只要在文檔中保證屬性唯一性；
如果想確定應當向一個給頂元素應用哪些樣式，ID能包含更多含義；
注意：HTML和XHTML中將class和ID定義為區分大小寫，因此class和ID值的大小寫必須與文檔中相應值匹配。
?
屬性選擇器（attribute selector）
類選擇器和ID選擇器是HTML、SVG和MathML文檔特定的，在其他標記語言中不能使用，因此CSS2引入屬性選擇器。
1. 簡單屬性選擇器
用于選擇具有某個屬性的元素，而不論該屬性的值是什么。Exp：
h1[class] {color:silver;} <h1 class="hoopla">Hello</h1>可將多個屬性選擇器鏈接在一起，根據多個屬性進行選擇。Exp：
a[href][title] {font-weight: bold;} <a href="http://www.baidu.com" title="a link">baidu</a>2. 具體屬性值選擇器
用于選擇有特定屬性值的元素。Exp：
a[href="http://www.css-discuss.org/about.html"] {font-weight:bold;}可以把多個屬性-值選擇器鏈接再一起，根據多個屬性值進行選擇。Exp：
a[href="http://www.w3.org/"][title="W3C Home"] {font-size: 200%}注意：具體屬性-值選擇器要求必須與屬性值完全匹配，如果遇到值本身包含一個用空格分隔的值列表，必須具體匹配所有值才能應用樣式。Exp：
planet[type="barren rocky"] {font-weight:bold;} <planet type="barren rocky">Mercury</planet> <!--匹配成功--><planet type="barren">dddd</planet> <!--匹配失敗-->?3. 部分屬性值選擇器
[~=]根據詞列表中任意一個詞進行選擇。Exp：
p[class~="warning"]{font-weight: bold;} <p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>等價于點號類名記法
p.warning {font-weight: bold;}而~=部分屬性選擇器能用于任何屬性，不僅限于class
CSS2發布的部分值屬性選擇器（子串匹配屬性選擇器）按照整個詞列表的字符串匹配，而不是單個詞
?
span[class*="cloud"] {font-style: italic;} span[class^="bar"] {background: silver;} span[class$="y"] {font-weight: bold;} <span class="barren rocky">Mercury</span> <!--匹配silver、bold--> <span class="cloudy barren">Venus</span> <!--匹配italic--> <span class="life-bearing cloudy">Earth</span> <!--匹配italic、bold-->4. 特定屬性選擇器
[att|=”val”]可以用于任何屬性及其值
*[lang|="en"] {color:white;} //選擇lang屬性等于en或者以en-開頭的所有元素 <h1 lang="en">Hello</h1> <!--匹配成功--><p lang="en-us">Greetings!</p> <!--匹配成功--><div lang="en-au">G'day!</div> <!--匹配成功--><p lang="fr">Bonjour!</p> <!--匹配失敗--><h4 lang="cy-en">Jrooana!</h4> <!--匹配失敗-->例：可用img[src|=”figure] {border:1px solid gray;} 匹配所有形如figure-1.gif、figure-3.jpg的圖片
?
元素的父子關系剛好在上下一層之間，而祖先/后代關系不論嵌套層次大小。
后代選擇器（descendant selector）
又稱包含選擇器或上下文選擇器（contextual selector），使規則只應有于某些嵌套結構（不論嵌套層次有多深）。
從右向左讀選擇器，每隔空格結合符（combinator）解釋為“……作為……的后代“。如：
//只選擇h1元素中包含的em元素【作為h1后代的em元素】（不會選擇其他em文本）h1 em {color: gray;}且不僅限于兩個選擇器，如：
ul ol ul em {color: gray;} //選擇blockquote中包含的所有b（粗體）元素和正常段落中的所有粗體文本blockquote b, p b {color:gray;}?
子元素選擇器
只選擇指定元素的指定子元素，而不是任意后代元素。子結合符(>)。如：
?
h1>strong {color:red;}?
<h1>This is <strong>very</strong> important.</h1> <!--匹配成功--><h1>This is <em>really <strong>very</strong></em> important.</h1> <!--匹配失敗-->?
可結合使用后代選擇器和子選擇器：
table.summary td > p 選擇作為一個td元素子元素的所有p元素，這個td元素本身從table元素繼承，該table元素有一個包含summary的class屬性。
?
?
相鄰兄弟元素選擇器
?
使用相鄰兄弟結合符（adjacentsibling combinatory）(+)用于選擇緊接在另一個元素后的元素，而且二者有相同的父元素，并且兩個元素要按“源順序”出現。
?
如：選擇緊接在一個h1元素后出現的段落
h1+p {margin-top;}用一個結合符只能選擇兩個相鄰兄弟元素中的第二個元素，前一個元素不受影響。
?
并且兩個元素之間的文本內容不會影響相鄰兄弟結合符起作用。如：
?
ol+ul {font-weight: bold;}<div><ol><li>List item 1</li><li>List item 1</li><li>List item 1</li></ol> This is some text that is part of the 'div'. <!--不影響選擇器起作用--><ul><li>A list item</li><li>Another list item</li><li>Yet another list item</li></ul></div>可結合其他結合符使用，如：
?
html>body table+ul {margin-top:1.5em;}/*選擇緊接在一個table元素后出現的所有兄弟ul元素，該table元素包含在一個body元素中，body元素本身是html元素的子元素。*/?
偽類選擇器
CSS定義了偽類，使已訪問頁面的錨好像已經有一個“visited”類一樣。添加樣式a:visited {color: red;}可自動選擇已訪問的頁面，不需要為任何錨增加class屬性。
所有偽類和偽元素關鍵字前面都有一個(:)。
錨元素有兩種基本類型：已訪問和未訪問，稱為偽類（pseudo-class），使用這些偽類的選擇器成為偽類選擇器（pseudo-class selector）。
鏈接偽類：
使用a:link標記未訪問的鏈接是因為，如果簡單使用a {color:blue;}可能會錯誤地改變文本中設置的錨點（如<a name=”section4”>）的樣式，而a:link能夠準確地只標記未訪問的鏈接。
為外部鏈接應用不同樣式（內部鏈接保持默認顏色不受影響）：a.external:link, a.external:visited {color: maroon;}
也適用于ID選擇器：
a#footer-copyright:link{font-weight:bold;} a#footer-copyright:visited {font-weight:normal;}:link和:visited是靜態偽類。第一次顯示后一般不會再改變文檔的樣式。
?
動態偽類
可以根據用戶行為改變文檔的外觀，可以應用到任何元素。
:focus 指示當前擁有輸入焦點的元素（可以接受鍵盤輸入或者能以某種方式激活的元素）
:hover 指示鼠標指針停留在哪個元素上
:active 指示被用戶輸入激活的元素
偽類順序很重要，建議使用link-visited-focus-hover-active
可結合使用偽類，如：
a:link:hover:lang(de) {color:gray;}注意不要將互斥的偽類結合在一起，如a:link:visited沒有任何意義。
?
靜態偽類:first-child用于選擇作為某元素的第一個字元素的指定元素。如：
p:first-child {font-weight:bold;} //選擇作為某元素第一個子元素的pli:first-child {text-transform:uppercase;} //選擇作為某元素第一個子元素的li?
lang()偽類用于選擇指定語言的元素。如：
*:lang(fr) {font-style:italic;} //選擇所有法語元素?
偽元素
為元素能夠在文檔中插入假想的元素，使用戶代理對假想的元素作出響應，從而得到某種效果。CSS2.1定義了4個偽元素：設置首字母樣式、設置第一行樣式、設置之前和之后元素的樣式。
1. 設置首字母樣式：用于設置一個塊級元素首字母的樣式。如：
p:first-letter {color:red;} //選擇每一段的第一個字母h2:first-letter {font-size:200%} //選擇每個h2中的第一個字母2. 設置第一行樣式：用于設置元素中的第一個文本行。如：
p:firstline {color:purple;}所有偽元素都應該放在出現該偽元素的選擇器的最后面，如：p:first-line em的寫法不合法。
3. 設置之前和之后元素的樣式如：
h2:before {content: "}}"; color: silver;} //在每個h2元素前加一對銀色中括號 body:after {content: " The End.";} //在文檔最后添加結束語轉載于:https://www.cnblogs.com/RDaneelOlivaw/p/7609840.html
總結
以上是生活随笔為你收集整理的CSS：基本概念、选择器、伪类伪元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 秒杀库存的简单控制
- 下一篇： CSS学习摘要-数值和单位及颜色