链接样式、列表样式、表格样式你都学扎实了吗？链接样式 :hover :active 列表样式表格样式 < colgro

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等），有些不一定生效。

链接可以有不同的样式，这取决于他们是什么状态，这四个链接状态是：

a:link —— 正常，未访问过的链接
a:visited —— 用户已访问过的链接
a:hover —— 当用户鼠标放在链接上时
a:active —— 链接被点击的那一刻

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

注意：

如果不符合顺序规则，则不符合的无法生效

链接样式的顺序记忆(小诀窍)：

L(link)OV(visited)E and H(hover)A(active)TE

:hover

:hover伪类 在鼠标移到元素上时向此元素添加特殊的样式。

这个伪类应用处于 “ 悬停状态 ” 的元素，悬停定义为用户指示了一个元素但没有将其激活。

最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态（eg：p）。

:active

:active伪类 向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。

这个伪类应用于处于激活状态的元素。

最常见的例子就是在 HTML 文档中点击一个超链接：在鼠标按钮按下期间，这个链接是激活的。还有其他一些方式来激活元素，另外从理论上讲其他元素也可以被激活（eg：p）。

注意：

只要对同一个元素使用了 :hover伪类，那么 :active伪类必须在其后！

注意：

只有：hover 和：active可以作用于其它元素！

列表样式

详情见：重学前端详解列表（list-style-type list-style-position 自定义列表 dl list-style-image list-style li的源css）（第五天）

表格样式

详情见：重学前端样式和text-align / 详解表格table（重点：继承/ border-spacing/collapse/ empty-cells/ box-sizing/ 合并行列）（第四天）

表格这里补充一个小的知识点：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<table border="1" style="color:white">
  <colgroup span="2" width="200px" style="background-color:red"></colgroup>
  <colgroup width="100px"  style="background-color:green"></colgroup>
  <tr>
    <th color="white">ISBN</th>
    <th>Title</th>
    <th width="300px">Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>
</body>
</html>

运行结果：

在这里插入图片描述

或

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<table border="1">
  <colgroup>
    <col span="2" width="200px" style="background-color:red">
    <col width="100px" style="background-color:green">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>
</body>
</html>