僞類及僞元素課堂內容及課後做業

時間 2020-06-29

標籤元素課堂內容課後简体版

原文原文鏈接

CSS 僞類用於向某些選擇器添加特殊的效果。css

CSS 僞元素用於向某些選擇器添加特殊元素。html

新建一個html文件,代碼內容以下：ajax

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudo Class And Pseudo Element</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/fontawesome.css" rel="stylesheet">
<style type="text/css">
a:link{
    color:#00F;
}
a:visited{
    color:black;
}
a:hover{
    color:yellow;
}
a:active{
    color:red;
}
tr td:nth-child(1):before{
    content:"你的名字:";
    color:red;    
}
tr td:nth-child(3):before{
    content:url(http://doc.exesoft.cn/pic/phone.png);    
    display:inline-block;
    width:23px;
    height:23px;
    position:relative;
    left:-10px;
    top:5px;    
}
</style>
</head>
<body>
<div class="container">
<h2><a href="http://www.cnblogs.com/exesoft">僞類及僞元素演示</a></h2>
<table class="table table-bordered">
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Phone</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>