![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
查无此人Correction status：qualified
Teacher's comments：完成的不错。
Collection
Collection
* 元素按显示方式分为哪几种, 并举例, 正确描述它们
html元素显示分为显示（可见）跟隐藏（不可见）
* CSS是什么? 它的主要作用是什么?
css是给HTML添加样式的。主要作用相当给HTML装潢
* 什么是CSS选择器,它的样式声明是哪二部分组成?
选中HTML指定的元素就是CSS选择器，样式声明有 属性跟属性值组成
1，举例演示CSS简单选择器(全部)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示CSS简单选择器(全部)</title>
</head>
<style>
*{
width:500px;
}
p{
width:500px;
}
#p{
width: 500px;
}
.p{
width:500px;
}
p,span{
background-color: blue;
}
</style>
<body>
<p class="p" id="p">CSS简单选择器</p>
<span>qqqqq</span>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2，举例演示CSS上下文选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示CSS上下文选择器(全部)</title>
</head>
<style>
p>a>span{
color: #3a87ad;
}
p span{
color:#999;
}
</style>
<body>
<p>
<a><span>CSS上下文选择器</span></a>
</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3，举例演示常用CSS结构伪类选择器(不少于四种)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示常用CSS结构伪类选择器(不少于四种)</title>
</head>
<style>
/*非限定类型*/
.ul>:first-child{
/*first-child:非限定类型,匹配父元素的第一个元素*/
background-color: #3a87ad;
}
.ul>:last-child{
/*last-child:非限定类型，匹配父元素最后一个子元素*/
background-color: #999999;
}
.ul>:nth-last-child(3){
/*nth-last-child:非限定类型，匹配父元素中倒数中的子元素*/
background-color: #333333;
}
.ul>:nth-child(2n+2){
/*nth-child:是最主要的非限定类型,其它四个只是它的某种行为快捷方式，n从0开始*/
background-color: blue;
}
/*限定类型*/
.ul1>:first-of-type{
/*first-of-type:限定类型，匹配父元素的第一个元素*/
background-color: blue;
}
.ul1>:last-of-type{
/*last-of-type：限定类型，匹配父元素的最后一个子元素*/
background-color: #2d6a88;
}
.ul1>:nth-last-of-type(2){
nth-last-of-type：限定元素，匹配父元素中倒数子元素
background-color: #3a87ad;
}
.ul1>:nth-of-type(2n+2){
/*nth-of-type：是最主要的限定类型,其它四个只是它的快捷方式*/
background-color:#d9edf7;
}
</style>
<body>
<ul class="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
