chambeeac08@outlook.com

報告翻譯推薦

 選擇器 「#」界說 id ，類型使用 <a href="#"> 一般超保持 </a><a id="x_hint" href="#"> Hint 超貫穿連接 </a>

a[critical] {  background-color: yellow; }

上面兩個看起來都是在設定當 p 在 div 區塊內時 設定其 CSS 樣式，但不同在
div p {} 會將 div 區塊下的所有 p 區塊都套用
div > p {} 只會將 div 區塊下的直接的 p 區塊套用，意即 p 區塊假如再被包在 strong 區塊內的話，就不會被套用

選擇器 [attribute=value] ，例如 當超保持是以開新視窗 target=_blank 方式開啟就套用粗體

 選擇器 「  」空白，div p { } 選擇所有 p 在 div 區塊內的設定

----- 接下來是一些 屬性 attribute 的設定 ---------------------

::before，在元件之前插入樣式
::after，在元件之後插入樣式，例如底下針對 h2 在的前後增添了 ※ 符號
      .page h2:before{ content:"※"; }
      .page h2:after{ content:"※"; }

#x_hint { color:red; text-decoration:none;}
#x_hint:hover { background-color:red; color:yellow;}

 選擇器 「. 」界說 class，典範利用  <DIV class="footer"><p>這是底部 © copyright 2017;</p></DIV>，後面CSS設定都省略 <style> 標籤的註記

reference: https://www.w3schools.com/cssref/css_selectors.asp 

div + p { background-color: yellow; }

在這類  [attribute=value] 設定體式格局還有多種符號可以進一步套用選擇，
請留意：該符號要寫在等號左邊

div  > p { background-color: yellow; }

選擇器 [attribute] 設定某個屬性的 CSS 結果，底下 critical 屬性是自行定義的
<a href="https://www.nctu.edu.tw">NCTU</a>、
<a href="https://www.nthu.edu.tw" critical >NTHU</a>、
<a href="https://www.ncu.edu.tw">NCU</a>

:active，用在 a 標籤，當點下貫穿連接時的回響反映。     類型 a:active { background-color: yellow; }
:link，用在 a 標籤，該貫穿連接網站還沒瀏覽過的顯現樣式。     典範 a:link { color: blue; }
:visited，用在 a 標籤，該貫穿連接網站還已瀏覽過的出現樣式。     類型 a:visited { color: gray; }
:hover，當滑鼠移到物件上時出現的樣式 。     類型 a:hover { background-color: yellow; }

<div>
   <h2>這是題目 h6 文字</h2>
   <p>這是在 div 下的 p 區塊文字</p>
   <strong>  <p>「加粗體」這是在 div 下的 p 區塊文字 </p>   </strong>
</div>

 有效 CSS 的同夥都知道要定義 class 的屬性是用 「. 」 id 用「#」，但偶然參考他人的CSS檔案卻發現有「翻譯社 」、「> 」、「+ 」、「~ 」、「^ 」、「* 」、「$ 」... 等等的符號，這些稱為選擇器（Selector）每一個符號有著分歧的作用，今天就來看看可以怎麼利用翻譯

div p { background-color: yellow; }

html, body {
   font-size:16px;
   font-family:微軟正黑體,標楷體翻譯社san-serif;
}