CSS3 :nth-last-child() 选择器,可以用来处理隔行变色的表格，详情请参考网上资料。
<style>
*{
margin: 0;
padding: 0;
}
body{
padding: 200px;
box-sizing: border-box;
}
table{
border-collapse: collapse;
}
td,th{
color: #000;
font-size: 16px;
line-height: 30px;
border: 1px solid #333;
padding: 0 15px;
box-sizing: border-box;
}
tbody tr:nth-child(odd){
background: rgba(204,255,255,.6);
}
</style>
<style>
*{
margin: 0;
padding: 0;
}
body{
padding: 200px;
box-sizing: border-box;
}
table{
border-collapse: collapse;
}
td,th{
color: #000;
font-size: 16px;
line-height: 30px;
border: 1px solid #333;
padding: 0 15px;
box-sizing: border-box;
}
tbody tr:nth-child(odd){
background: rgba(204,255,255,.6);
}
</style>1. 先使用class在便签上定义类名 ：如 <p class="p1"></p>
2. 设置并应用样式：<style typpe="text/css">
.p{color:red;}
</style>
3. 同一个标签，可以拥有多个类名，类名用空格隔开
<p class="类名1 类名2"></p>
class可以重复，也就是说，同一个页面上可能有很多个标签同时属于一个类，同一个标签可以有多个类。<style type="text/css">
p{
color: turquoise;
}
div{
width: 50px;
height: 50px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<p>段落1</p>
<div>文本1</div>
<p>段落2</p>
<div>文本2</div>
<p>段落3</p>
</body><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>CSS选择器</title>
</head>
<body>
<h2 id="title">锦瑟</h2>
<h4 class="author">唐 李商隐</h4>
<p >锦瑟无端五十弦，一弦一柱思华年。</p>
<p class="texts">庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p>
<p >沧海月明珠有泪，蓝田日暖玉生烟。</p>
<p class="texts">此情可待成追忆，只是当时已惘然。</p>
</body>
</html> 标签选择器 E{
CSS规则 以文档元素作为选择父
}
node2:/var/www/html/jquery#cat t6.html
<td>aaaaaaaaaa</td>
<li>bbbbbbbbb</li>
<p>ccccccccccc</p>
node2:/var/www/html/jquery#cat t6.html
<style>
li {
font-size:40px;
}
</style>
<td>aaaaaaaaaa</td>
<li>bbbbbbbbb</li>
<p>ccccccccccc</p>
类选择器 E.className{
CSS规则 以文档元素的class作为选择符
}
node2:/var/www/html/jquery#cat t8.html
<style>
li.ccc {
font-size:80px;
color:blue;
}
</style>
<td>aaaaaaaaaa</td>
<li class='aaa'>bbbbbbbbb</li>
<li class='bbb'>eeeeeeeee</li>
<li class='ccc'>fffffffff</li>
<li class='aaa'>ggggggggg</li>
<p>ccccccccccc</p>
ID 选择器 #ID{ 以文档元素的唯一标识符ID作为选择符
CSS规则
}
node2:/var/www/html/jquery#cat t7.html
<style>
#aaa {
font-size:80px;
color:blue;
}
</style>
<td>aaaaaaaaaa</td>
<li id='aaa'>bbbbbbbbb</li>
<li id='bbb'>eeeeeeeee</li>
<li id='ccc'>fffffffff</li>
<li id='aaa'>ggggggggg</li>
<p>ccccccccccc</p> h3 {
color: blue;
font-size:20px;
} div ol li{
/*书写具体样式
*每个元素之间用空格隔开
*最后选择的是<li>中的内容
*如果要具体是哪个div，像<div class="box">,我们可以这样写
* .box ol li{ }
*/
}
