伪类选择器在表格中的应用

最新推荐文章于 2024-06-27 23:42:55 发布

原创最新推荐文章于 2024-06-27 23:42:55 发布 · 393 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3

初学者专栏收录该内容

22 篇文章

订阅专栏

伪类选择器在表格中的应用

<body>
     
		 <table>
		 <tr>
		 			  <td>1</td>
		 			  <td>11</td>
		 			  <td>12</td>
		 </tr>
		 <tr>
		 			  <td>2</td>
		 			  <td>21</td>
		 			  <td>22</td>
		 </tr>
		 <tr>
		 			  <td>3</td>
		 			  <td>31</td>
		 			  <td>32</td>
		 </tr>
		 <tr>
		 			  <td>4</td>
		 			  <td>41</td>
		 			  <td>42</td>
		 </tr>
		 <tr>
		 			  <td>5</td>
		 			  <td>51</td>
		 			  <td>52</td>
		 </tr>
		 </table>
	  </div>
   
		  <table>
		  <tr>
			  <td>1</td>
			  <td>11</td>
			  <td>12</td>
		  </tr>
		  <tr>
		  			  <td>2</td>
		  			  <td>21</td>
		  			  <td>22</td>
		  </tr>
		  <tr>
		  			  <td>3</td>
		  			  <td>31</td>
		  			  <td>32</td>
		  </tr>
		  <tr>
		  			  <td>4</td>
		  			  <td>41</td>
		  			  <td>42</td>
		  </tr>
		  <tr>
		  			  <td>5</td>
		  			  <td>51</td>
		  			  <td>52</td>
		  </tr>
		  </table>

    </body>

html代码块

 <style type="text/css">
            *{margin: 0;padding: 0;}
      table:nth-child(1){
		 width:400px;
		 height:300px;
		 border:1px solid #000000;
		 border-collapse:collapse;
		 margin: 50px;
		 float: left;
	  }
	  td{
	    border:solid 1px #000000;
	  }
	  table:nth-child(1) td:nth-of-type(2){
		  width: 300px;
	  }
	 table:nth-child(1) tr:nth-child(1){
		  font-weight: bold;
	  }
	 table:nth-child(1) tr:nth-of-type(3){
		  color:red;
	  }
	 table:nth-child(1) tr:nth-last-of-type(1){
		  font-weight: bold;	
		  font-size: 20px;
			}
			
			
			
			table:nth-child(2){
				width:400px;
				height:300px;
				border-collapse:collapse;
				margin: 50px;
				float: left;
			}
			table:nth-child(2) tr:nth-child(2n-1){
				background: #989898;
			}
			table:nth-child(2) tr:nth-child(1){
				font-weight: bold;
				border-bottom: 1px solid black;
			}
			table:nth-child(2) td:nth-child(n){
				border:0px;
			}
        </style>