一、id及class选择符
id和class的名称是由用户自定义的。id号可以唯一地标识html元素，为元素指定样式。id选择符以#来定义。
1、id选择符 注：在网页中，每个id名只能是唯一不重复的。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#title2{ /*#后的是id名称*/
background-color: red;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<h2 id="title1">我是标题2</h2>
<h2 id="title2">我也是标题2</h2>
</body>
2、class选择符 注：class与id不同，class可以重复使用，定义一类的元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.pp{ /*将同一个class名的元素都选中了*/
background-color: blue;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<p class="pp">这是个段落</p>
<h3 class="pp">这是个标题</h3>
</body>
</html>
这是个段落
这是个标题
二、伪类选择符
伪类选择符比较多，如下表所示：
下面简单举几个例子说明：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 a:link{
background-color: red; /*设置链接a在未访问前的样式为红色背景色*/ }
}
#div1 a:visited{
background-color: blue;/*设置链接a在访问后的样式的背景色为蓝色*/
}
#div1 a:hover{
text-decoration: none; /*当鼠标悬停在链接上时，链接的下划线消失*/
}
</style>
</head>
<body>
<div id="div1">
<a href="#">点击链接</a>
</div>
</body>
</html>
点击链接
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.ul li:first-child{color:red;} /*第一个*/
.ul li:last-child{color:blue;} /*最后一个*/
.ul li:nth-child(2){color:yellow;}/*第二个*/
/*倒数第二个*/
.ul li:nth-last-child(2){color:yellow;}
</style>
</head>
<body>
<ul class="ul">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
</body>
</html>
- test1
- test2
- test3
- test4
- test5
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*奇数*/
.ul2 li:nth-child(odd){background-color:#ccc;}
.ul2 li:nth-child(2n+1){border-left:2px solid red;}
/* 偶数 */
.ul2 li:nth-child(even){background-color:#0F7CCF;}
.ul2 li:nth-child(2n){border-left:2px solid black;}
/* 3的倍数 */
.ul2 li:nth-child(3n){color:red;font-weight:bold;}
</style>
</head>
<body>
<ul class="ul2">
<li>哈哈</li>
<li>呵呵</li>
<li>嘻嘻</li>
<li>啊啊</li>
<li>哦哦</li>
<li>嗯嗯</li>
</ul>
</body>
</html>
- 哈哈
- 呵呵
- 嘻嘻
- 啊啊
- 哦哦
- 嗯嗯
时间： 2024-10-12 19:57:23