css定义最后一行的样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css定义最后一行的样式相关的知识，希望对你有一定的参考价值。
有一个表格我想让最后一行不显示下划线，其他行显示下划线，在不使用JQUERY的情况下怎么实现？
你说的不使用jquery的话，那么javascript能用的不？如果js都不能用的话，那么一般css是无法实现这个效果的。
但是css3是可以的，不过只有支持css3的浏览器才支持。
table tr:last-child......
你可以用这个选择来选择最后一行。
但是注意，只有支持css3的浏览器才可以哦！ 参考技术A 你的意思是说表格一行的下边框是吧？如果是的话，就这样：
你把table的border设置为0，然后针对不同的行设置css样式。
如果你只要最后一行的下边框不显示的话，你可以设一个css样式：
.test
border:1px 1px 0px 1px solid solid dashed solid red red transparent red;
这个样式的意思就是说设置上、右、左的border为1px，而下设为0。追问
不是，是表格中有好多行，然后每一行都有下边框（就是下划线），然后最后一行不要
追答你没理解我的意思，这个css样式不是让你给table，而是给table里的td的
参考技术B 给最后一个tr加类名，用继承样式实现，如下代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.table td border-bottom:1px #000 solid;
.table .borderNo td border:none
</style>
</head>
<body><table width="100%" border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td height="20"> </td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr class="borderNo">
<td height="20"> </td>
</tr>
</table>
</body>
</html> 参考技术C 我明白你要干嘛了， 你是想 在表格之间 有个 分隔线 是吧？
CSS-定义样式表
1.HTML标记定义
p属性:属性值;属性1:属性1
<p>...</p>
注：p可以叫做选择器，定义那个标记中的内容执行其中的样式。一个选择器可以控制若干个样式属性，他们之间需要用英文的分号隔开，最后一个可以不加分号。
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式（CSS选择器）</title> 5 <meta charset="UTF-8"> 6 <style type="text/css"> 7 p 8 color:red; 9 font-size:30px 10 11 </style> 12 13 </head> 14 <body> 15 <p>昨天是七夕节！</p> 16 </body> 17 </html>
显示效果：
2.Class定义
.p属性:属性值;属性1:属性值1
<p class="p">...</p>
注：class定义是以"."开始
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式（CSS选择器）</title> 5 <meta charset="UTF-8"> 6 <style> 7 .p 8 background-color: red; 9 color:blue; 10 font-size:40px; 11 12 </style> 13 </head> 14 <body> 15 <p class="p">昨天是七夕节！</p> 16 </body> 17 </html>
显示效果：
与HTML标记定义联用：
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式（CSS选择器）</title> 5 <meta charset="UTF-8"> 6 <style> 7 .p 8 background-color: red; 9 color:blue; 10 font-size:40px; 11 12 .p p 13 color:green; 14 font-size:50px; 15 16 </style> 17 </head> 18 <body> 19 <div class="p"> 20 <p>昨天是七夕节！</p> 21 昨天是七夕节！昨天是七夕节！ 22 </div> 23 </body> 24 </html>
显示效果：
3.ID定义
#p属性:属性值;属性1:属性值1
<p id="p">...</p>
注：ID定义是以"#"开始的。
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式（CSS选择器）</title> 5 <meta charset="UTF-8"> 6 </head> 7 <style> 8 #p 9 background-color: green; 10 color:red; 11 font-size:40px; 12 13 </style> 14 <body> 15 <p id="p">昨天是七夕节！</p> 16 </body> 17 </html>
显示效果：
ID定义与HTML标记定义联用
代码示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式（CSS选择器）</title> 5 <meta charset="UTF-8"> 6 </head> 7 <style> 8 #ppp 9 background-color: green; 10 color:red; 11 font-size:40px; 12 13 #ppp p 14 background-color: white; 15 color: blue; 16 font-size: 50px; 17 18 </style> 19 <body> 20 <div id="ppp"> 21 <p>昨天是七夕节！</p> 22 昨天是七夕节！昨天是七夕节！ 23 </div> 24 </body> 25 </html>
显示效果：
4.优先级问题
（1）ID > Class > HTML
（2）同级时选择离元素最近的一个
#pcolor:red
#pcolor:#f60
执行颜色为#f60的
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式（CSS选择器）</title> 5 <meta charset="UTF-8"> 6 <style> 7 #pppcolor:blue 8 .pcolor: green; 9 divcolor: red; 10 </style> 11 </head> 12 <body> 13 <div id="ppp" class="p"> 14 昨天是七夕节！昨天是七夕节！ 15 </div> 16 </body> 17 </html>
显示效果：
5.组合选择器（同时控制多个元素）
h1,h2,h3font-size:14px;color:red;
注：选择器组合可以使用“,”隔开
代码示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式（CSS选择器）</title> 5 <meta charset="UTF-8"> 6 <style> 7 h1,h2,h3,h4,p,.divcolor:red 8 </style> 9 </head> 10 <body> 11 <div> 12 <h1>昨天是七夕节！</h1> 13 <h2>昨天是七夕节！</h2> 14 <h3>昨天是七夕节！</h3> 15 <h4>昨天是七夕节！</h4> 16 </div> 17 <p> 18 昨天是七夕节！ 19 </p> 20 <div class="div"> 21 昨天是七夕节！ 22 </div> 23 </body> 24 </html>
显示效果：
6.伪元素选择器
（1）a:link 正常链接的样式
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式（CSS选择器）</title> 5 <meta charset="UTF-8"> 6 <style> 7 a:linkcolor:red 8 </style> 9 </head> 10 <body> 11 <a href="http://www.baidu.com" target="_blank">百度</a> 12 </body> 13 </html>
（2）a:hover 鼠标放上去的样式
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式（CSS选择器）</title> 5 <meta charset="UTF-8"> 6 <style> 7 a:hovercolor:green 8 </style> 9 </head> 10 <body> 11 <a href="http://www.baidu.com" target="_blank">百度</a> 12 </body> 13 </html>
（3）a:active 选择链接时的样式
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式（CSS选择器）</title> 5 <meta charset="UTF-8"> 6 <style> 7 a:activecolor:blue 8 </style> 9 </head> 10 <body> 11 <a href="http://www.baidu.com" target="_blank">百度</a> 12 </body> 13 </html>
（4）a:visited 已经访问过的链接的样式
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式（CSS选择器）</title> 5 <meta charset="UTF-8"> 6 <style> 7 a:visitedcolor:yellow 8 </style> 9 </head> 10 <body> 11 <a href="http://www.baidu.com" target="_blank">百度</a> 12 </body> 13 </html>
以上是关于css定义最后一行的样式的主要内容，如果未能解决你的问题，请参考以下文章