重要的一天，記錄一些筆記:

HTML

• ::after 解釋
  在原本的元件後面增加內容。

• []的運用

style{
.img img[alt]{
  width: 200px;
  height: 200px;
}

<img src="img1.jpg" alt="im img1">
<div class="img">
    <img src="img2.jpg" alt="im img2">
    <img src="img3.jpg" >
</div> 

這樣如此就只有img2會被設定為固定大小

• 設定4行5列的表格

<table>
    <thead>
        <tr>
            <th></th>
            <th>名字</th>
            <th>物品</th>
            <th>費用</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1月</th>
            <td>A</td>
            <td>海報紙</td>
            <td>$250</td>
        </tr>
        <tr>
            <th>2月</th>
            <td>B</td>
            <td>影印費</td>
            <td>$100</td>
        </tr>
        <tr>
            <th>3月</th>
            <td>C</td>
            <td>拖把</td>
            <td>$250</td>
        </tr>
        <tr>
            <th>4月</th>
            <td>D</td>
            <td>網路線</td>
            <td>$550</td>
        </tr>
    </tbody>
</table>

• contenteditable="true" 解釋
  可以讓這個元件成為可編輯狀態。

• checkbox 的 disabled 屬性
  disabled 属性可設計或返回是否禁用 checkbox。

• 偽類的順序及解釋

:link    向未被訪問的連結添加樣式。
:visited 向已被訪問的連結添加樣式。
:hover   當鼠標移到元素上方時，向元素添加樣式。
:active  滑鼠按下的樣式
:focus   選擇具有焦點的元素 (接受鍵盤事件或其他用戶輸入的元素)

• 偽類選取器
  :nth-child(odd) 選取順序為奇數的元素
  :nth-child(an+b)
  選取順序為 an+b, 則n從0開始 故選取結果依序為b, n+b, 2n+b ...

• 利用CSS做到點擊顯示選單功能
  首先在父層元素使用:active 讓子元素display:block;
  在讓子元素:hover, display:block;

• ~ & + 選取器的用法

<div>
    <p>One</p>
    <div>Two</div>
    <p>Three</p>
</div>

<div>
    <div>Four</div>
    <div><p>Five</p></div>
    <p>Six</p>
    <p>Seven</p>
</div>

若是 div + p{} 則影響到的範圍是 three, six
若是 div ~ p{} 則影響到的範圍是 three, six, seven