需求:
- 首行文字居中,修改字体颜色
- 最后一行设置红色
- 设置前面两行样式
- 排除首尾,设置倒数第二行样式
- 表格隔行变色
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm14.aspx.cs" Inherits="WebApplication1.WebForm14" %>
<!DOCTYPE html>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
<script type="text/javascript">
$(function () {
//首行居中,字体蓝色
$("tr:first").css({ "text-align": "center", "color": "blue" });
//最后一行红色
$("tr:last").css("color", "red");
//前面两行背景黄色
$("tr:lt(2)").css("background-color", "#ff0");
//排除首尾,倒数第二行
$("tr:not(:first):not(:last):eq(-2)").css("background-color", "#9cf");
//隔行变色 偶数行背景浅灰
$("tr:even").css("background-color", "#eee");
});
</script>
</head>
<body>
<table style="width:400px;" border="1">
<tr>
<td>序号</td>
<td>姓名</td>
<td>城市</td>
</tr>
<tr>
<td>1</td>
<td>樊胜美</td>
<td>顺德</td>
</tr>
<tr>
<td>2</td>
<td>安迪</td>
<td>广州</td>
</tr>
<tr>
<td>3</td>
<td>小蚯蚓</td>
<td>上海</td>
</tr>
<tr>
<td>4</td>
<td>关关</td>
<td>哈尔滨</td>
</tr>
<tr>
<td>5</td>
<td>曲筱绡</td>
<td>北京</td>
</tr>
</table>
</body>
</html>
Code language: HTML, XML (xml)
说明:
tr:first:选中表格第一行tr:last:选中表格最后一行tr:lt(2):选取索引小于2的前两行:not():排除指定元素tr:even:索引偶数行实现隔行变色(索引从0开始)
Previous: 简单选择器
Next: CSS样式相关的操作和开关灯效果