《PHP 面試問答》
結合實際 PHP 面試，系統的彙總面試中的各種各樣的問題，嘗試提供簡潔準確的答案。如果你在 PHP 面試中遇到問題，歡迎提 Issues 交流。包含網絡協議、數據結構與算法、PHP、Web、MySQL、Redis、Linux、安全、設計模式、架構、自我介紹、離職原因、職業規劃、準備問題等部分
基本規則
通過 CSS 可以向文檔中的一組元素類型應用某些規則利用 CSS，可以創建易於修改和編輯的規則，且能很容易地將其應用到定義的所有文本元素
規則結構
每個規則都有兩個基本部分：選擇器和聲明塊；聲明塊由一個或多個聲明組成；每個聲明則是一個屬性-值對每個樣式表由一系列規則組成
如規則左邊所示，選擇器定義了將影響文檔中的哪些部分規則右邊包含聲明塊，它由一個或多個聲明組成。每個聲明是一個 CSS 屬性和該屬性的值的組合
元素選擇器
最常見的選擇器往往是 HTML 元素。文檔的元素就是最基本的選擇器
聲明和關鍵字
聲明塊包含一個或多個聲明。聲明總有如下格式：一個屬性後面跟一個冒號，再後面是一個值，然後是一個分號。冒號和分號後面可以有0個或多個空格如果一個屬性的值可以取多個關鍵字，在這種情況下，關鍵字通常由空格分隔。並不是所偶屬性都能接受多個關鍵字，不過確實有許多屬性是這樣
p {font: medium Helvetica;}選擇器
通配選擇器
CSS2引入了一種新的簡單選擇器，稱爲通配選擇器（universal selector），顯示爲一個星號（*）。這個選擇器可以與任何元素匹配，就像是一個通配符
* {color: red;}類選擇器
要應用樣式而不考慮具體涉及的元素，最常用的方法就是使用類選擇器。在使用類選擇器之前，需要修改具體的文檔標記，以便選擇器正常工作爲了將一個類選擇器的樣式與元素關聯，必須將 class 屬性指定爲一個適當的值
*.warning {font-weight: bold;}
p.warning {font-weight: bold;}
.warning {font-weight: bold;}多類選擇器
.warning {font-weight: bold;}
.urgent {font-style: italic;}
.warning.urgent {background: silver;}ID 選擇器
ID 選擇器前面有一個 # 號ID 選擇器不引用 class 屬性的值
在一個 HTML 文檔中，ID 選擇器會使用一次，且僅一次
*#first-para {font-weight: bold;}
#first-para {font-weight: bold;}屬性選擇器
在某些標記語言中，不能使用類和 ID 選擇器。爲了解決這個問題，CSS2引入了屬性選擇器（attribute selector），它可以根據元素的屬性及屬性值來選擇元素
簡單屬性選擇
如果希望選擇某個屬性的元素，而不討論該屬性的值是什麼，可以使用一個簡單屬性選擇器
<h1 class="hoopla">Hello</h1>
<h1 class="severe">Serenity</h1>
<h1 class="fancy">Fooling</h1>h1[class] {color: silver;}img[alt] {border: 3px solid red;} /*對所有帶有 alt 屬性的圖像應用樣式*/
*[title] {font-weight: bold;} /*包含標題(title)信息的所有元素變爲粗體顯示*/根據具體屬性值選擇
除了選擇有某些屬性的元素，還可以進一步縮小選擇範圍，只選擇有特定屬性值的元素
/*將指向 Web 服務器上某個特定超鏈接變成粗體*/
a[href="https://blog.maplemark.cn"] {font-weight: bold;}<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>/*將第二個元素文本變成粗體*/
planet[moons="1"] {
font-weight: bold;
}根據部分屬性值選擇
如果屬性能接受詞列表（詞之間用空格分隔），可以根據其中的任意一個詞進行選擇
img[title~="Figure"] {border: 1px solid gray;}- 子串匹配屬性選擇器
| 類型 | 描述 |
|---|---|
| [foo^="bar"] | 選擇 foo 屬性值以"bar"開頭的所有元素 |
| [foo$="bar"] | 選擇 foo 屬性值以"bar"結尾的所有元素 |
| [foo*="bar"] | 選擇 foo 屬性值中包含子串"bar"的所有元素 |
特定屬性選擇類型
<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>*[lang|="en"] {color: white;}這種屬性選擇器最常見的用途是匹配語言值
後代選擇器
通過文檔樹結構，可以很形象的理解什麼是後代選擇器（descendant selector），也稱爲包含選擇器/上下文選擇器。定義後代選擇器就是來創建一些規則，它們僅在某些結構中起作用，而在另外一些結構中不起作用
<div class="row"><p>文字一</p></div>
<div class="row"><div><p>文字一後代</p></div></div>
<div class="row">文字二</div>
<p>文字三</p>.row p{color: red;}選擇子元素
在某些情況下，可能並不想選擇一個任意的後代元素；而是希望縮小範圍，只選擇另一個元素的子元素
.row > p{color: red;}選擇相鄰兄弟元素
<ol>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ol>
<ul>
<li>A list item</li>
<li>Another list item</li>
<li>Yet Another list item</li>
<li>Lat list item</li>
</ul>ol + ul {font-weight: bold;} /*將命中 ul*/ul 必須緊跟在 ol 後面
僞類選擇器
錨類型稱爲僞類
鏈接僞類
CSS2.1定義了兩個只應用於超鏈接的僞類
| 僞類名 | 描述 |
|---|---|
| :link | 指示作爲超鏈接並指向一個未訪問地址的所有錨 |
| :visited | 指示作爲已訪問超鏈接的所有錨 |
a {color: black;}
a:link {color: bule;}
a:visited {color: red;}動態僞類
CSS2.1定義了3個動態僞類，它們可以根據用戶行爲改變文檔的外觀
| 僞類名 | 描述 |
|---|---|
| :focus | 指示當前擁有輸入焦點的元素 |
| :hover | 指示鼠標指針停留在哪個元素上 |
| :active | 指示被用戶輸入激活的元素 |
僞類順序：link-visited-focus-hover-active
選擇第一個子元素
可以使用靜態僞類:first-child 來選擇元素的第一個子元素
p:first-child {font-weight: bold;}僞元素選擇器
就像僞類爲錨指定幻像類一樣，僞元素能夠在文檔中插入假象的元素，從而得到某種效果。CSS2.1中定義了4個僞元素：設置首字母樣式、設置第一行樣式、設置之前和之後元素的樣式
設置首字母樣式
p:first-letter {color: red;}設置第一行樣式
p:first-line {color: purple;}:first-letter 和 :first-line 的限制
在 CSS2 中，:first-letter 和:first-line 僞元素只能應用於標記或段落之類的塊級元素，而不能應用於超鏈接等的行內元素
設置之前和之後元素的樣式
p:before {color: black;}
p:after {color: red;}本文轉載自楓葉林博客，《CSS選擇器的分類》