一、作业要求：大家自己举案例， 演示CSS中的常用选择器， 必须深刻体会伪类选择器的作用， 以及易混淆的: nth-child(), nth-of-type()
二、作业过程：
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示CSS中的常用选择器</title>
<style>
/*通用选择器*/
*{
font-size: 30px;
}
/*元素选择器*/
p{color:green;
}
div{color: brown;
}
span{
font-size: 20px;
color: red;
}
/*类选择器*/
.box{ width:100px;
height:100px;
background-color: yellow;
}
/*ID选择器*/
#aboutus{
color:red;
}
/*伪类选择器*/
div:hover{
color:greenyellow;
border-bottom: darkmagenta;
}
a:hover{
color:darkgreen;
}
a:active{color:mediumvioletred;
font-size: 50px;}
/*选中第一个元素*/
div ul li:first-child{
font-size: 20px;
color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 20px;
color: yellow;
}
/*选中当前指定的元素 数值从1开始*/
div ul li:nth-child(3){
font-size: 30px;
color: purple;
}
/*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/
div ul li:nth-child(n){
font-size: 40px;
color: red;
}
/*偶数*/
div ul li:nth-child(2n){
font-size: 50px;
color: gold;
}
/*奇数*/
div ul li:nth-child(2n-1){
font-size: 50px;
color: yellow;
}
/*隔几换色 隔行换色
隔4换色 就是5n+1,隔3换色就是4n+1
*/
div ul li:nth-child(5n+1){
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<!--“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素-->
<!-- 演示基本选择器：元素选择器 -->
<p>中国</p>
<div>美国</div>
<h3>我是标题</h3>
<span>***</span>
<!--类选择器-->
<div class="box">我是一个方块</div>
<!--ID选择器-->
<!--ID选择器有几个地方需要特别注意：-->
<!--第一：一个文档中一个id选择器只充许使用一次，因为id在页面中是唯一的；-->
<!--第二，id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名；-->
<!--第三，可以在不同的文档中使用相同的id名-->
<div id="aboutus">我是一个ID选择</div>
<!--伪类选择器-->
<div>我是一个兵</div>
<a href="http://sina.com" >点我看啊</a>
<!--内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）-->
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
