9.css中的伪元素<a>标签<p>标签

本文详细介绍了CSS中伪元素的应用,特别是针对&lt;a&gt;标签的四种状态:link、visited、hover和active的样式调整方法。同时,还讲解了如何使用first-letter和first-line来修饰&lt;p&gt;标签的首字符和首行。
css中的伪元素
    <a>标签
        未访问时默认是蓝色   link可以修改它
        已访问时默认是紫色   visited可以修改它
        默认鼠标放上没有效果 hover可以修改它
        默认鼠标按下是红色  active可以修改它
        <a>
        link     未访问过的超链接的样式
        visited   已访问过的超链接样式
        hover    鼠标放上的超链接样式
        active    鼠标按下的超链接样式(书写有顺序)

        hover一定要写在link和visited之后,active一定要写到hover之后
        但是各自单独写可以实现。所以一定要link--visited--hover--active顺序
    <p>标签
        first-letter  修改首个字符   p:first-letter{...}
        first-line   修改首行       p:first-line{...}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>太阳系行星数据</title> <link href="minimal-table.css" rel="stylesheet"> </head> <body> <h1>太阳系行星数据</h1> <header> <table id="table"> <caption> 太阳系中行星的一些数据。(资料取自<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">NASA 行星数据 - 公制</a>,图片取自<a href="https://www.nasa.gov/multimedia/imagegallery/">NASA 照片库。</a>) </caption> <thead> <td colspan="2"></td> <th scope="col" class="name-column" >名字</th> <th scope="col">图片</th> <th scope="col">质量 (10<sup>24</sup>kg)</th> <th scope="col">直径 (km)</th> <th scope="col">密度 (kg/m<sup>3</sup>)</th> <th scope="col">重力 (m/s<sup>2</sup>)</th> <th scope="col">天长 (小时)</th> <th scope="col">平均温度 (°C)</th> <th scope="col">卫星数量</th> <th scope="col">备注</th> </thead> <tbody> <tr> <th colspan="2" rowspan="4" scope="rowgroup">类地行星</th> <th>水星</th> <td>0.330</td> <td>4879</td> <td>5427</td> <td>3.7</td> <td>4222.6</td> <td>57.9</td> <td>167</td> <td>0</td> <td>距太阳最近</td> </tr> <tr> <th>金星</th> <td>4.87</td> <td>12104</td> <td>5243</td> <td>8.9</td> <td>2802.0</td> <td>108.2</td> <td>464</td> <td>0</td> <td></td> </tr> <tr> <th>地球</th> <td>5.97</td> <td>12756</td> <td>5514</td> <td>9.8</td> <td>24.0</td> <td>149.6</td> <td>15</td> <td>1</td> <td>我们的世界</td> </tr> <tr> <th>火星</th> <td>0.642</td> <td>6792</td> <td>3933</td> <td>3.7</td> <td>24.7</td> <td>227.9</td> <td>-65</td> <td>2</td> <td>红色星球</td> </tr> <tr> <th rowspan="4" scope="rowgroup">类木行星</thead> <th rowspan="2" scope="rowgroup">气巨星</th> <th>木星</th> <td>1898</td> <td>142984</td> <td>1326</td> <td>23.1</td> <td>9.9</td> <td>778.6</td> <td>-110</td> <td>67</td> <td>太阳系最大</td> </tr> <tr> <th>土星</th> <td>568</td> <td>120536</td> <td>687</td> <td>9.1</td> <td>10.7</td> <td>1433.5</td> <td>-140</td> <td>62</td> <td></td> </tr> <tr> <th rowspan="2" scope="rowgroup">冰巨星</th> <th>天王星</th> <td>86.8</td> <td>51118</td> <td>1271</td> <td>8.7</td> <td>17.2</td> <td>2872.5</td> <td>-195</td> <td>27</td> <td></td> </tr> <tr> <th>海王星</th> <td>102</td> <td>49528</td> <td>1631</td> <td>11.0</td> <td>16.1</td> <td>4495.1</td> <td>-200</td> <td>14</td> <td></td> </tr> <tr> <th colspan="2" scope="row">矮行星</th> <th>冥王星</th> <td>0.0146</td> <td>2370</td> <td>2095</td> <td>0.7</td> <td>153.3</td> <td>5906.4</td> <td>-225</td> <td>5</td> <td>2006年降格,但<a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">尚存争议</a></td> </tr> </tbody> </table> </body> </html> 这个是全部代码。我现在要在“名字”这一列添加一个整体的黑色边框应该怎么弄
最新发布
08-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值