重要的一天，记录一些笔记:

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