![[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
元素按显示方式分为块级元素和行内元素
遵循: 最大化原则
总是独占一行显示, 自动充满父级元素的内容区
块级元素二边不允许有任何其它元素,也就是它总是自带换行的
块级元素在没有内容撑开的情况下, 需要设置宽高,否则无法感知存在
例如:<div>, <ul+li>, <table>,<p>, <h1-h6>...
遵循: 最小化原则
总是在一行文本元素的内部生成, 它的宽高由所在行决定,不可以设置
例如: <span>,<input>, <em>,<strong>,<a>...
CSS是层叠样式表(Cascading Style Sheets)
CSS是用来设置页面中的元素样式和布局的
选择器，说白了就是用一种方式把你想要的那一个标签选中！把它选中了，你才能操作这个标签的CSS样式。
声明由一个属性和一个值组成
常用的简单选择器有5种:
* 元素选择器: `div {...}`
* 属性选择器: `tag[property...]`
* 类/class选择器: `.active {...}`
* ID选择器: `#main {...}`
* 群组选择器: `p, .active, div {...}`
* 通配符选择器: `*`, 表示全部元素, 通常用在上下文选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style>
/* 元素选择器 */
h1{color: red;}
/* 属性选择器 */
input[type="email"]{background-color: blue;}
/* 类/class选择器 */
.cl{color: brown;}
/* ID选择器 */
#item{color: #ccc;}
/* 群组选择器 */
h2,p,.q{background-color: #CCC;}
/* 通配符选择器 */
*{font-size: 18px;}
</style>
</head>
<body>
<h1>这是一个H1标签</h1>
<div class="cl">PHP中文网</div>
<div id="item">phpStudy V8</div>
<input type="email" id="email" name="email">
<h2>群组选择器</h2>
<p>选择器的不同，在于它选择方式不同</p>
<div class="q">样式表极大地提高了工作效率</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
所谓上下文, 是指元素之间的结构关系,如层级,包含等,主要有四个选择器
后代选择器: `空格`, 如 `div p`, `body *`
父子选择器: `>`, 如 `div + h2`
同级相邻选择器: `+`, 如 `li.red + li`
同级所有选择器: `~`, 如 `li.red ~ li`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上下文选择器</title>
<style>
/* 后代选择器 */
#a h3{color: red;}
/* 父子选择器 */
#a > h3{background-color: #ccc;}
/* 同级相邻选择器 */
#b + h3 {background-color:lightcyan;}
/* 同级所有选择器 */
#b ~ h3 {color:blue;}
</style>
</head>
<body>
<div id="a">
<h3 id="b">上下文选择器1</h3>
<h3>上下文选择器2</h3>
<h3>上下文选择器3</h3>
<div>
<h3>上下文选择器4_1</h3>
<h3>上下文选择器4_2</h3>
<h3>上下文选择器4_3</h3>
</div>
</div>
<h3>上下文选择器5</h3>
<h3>上下文选择器6</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构伪类选择器</title>
<style>
/*选中页面所有的ul下面的第二个子元素*/
ul > :nth-child(2) {background-color: lightblue;}
/*只选中第一个ul中的第二个子元素*/
ul:first-child > :nth-child(2) {background-color: lightgreen;}
/*选中最后一个*/
ul:first-child > :last-child {background-color: lightpink;}
/*选中最后一个子元素中,类型为<p>的元素*/
/*参数是表达式时, n从0开始, n+1, 表示的索引是: 1,2,3,4...*/
ul:first-child > :last-child > p:nth-child(n+1) {background-color: yellow;}
/*选中最后一个子元素中,类型为<li>的后代元素*/
ul:first-child > :last-child li:nth-child(n+1) {background-color: lightgray;}
</style>
</head>
<body>
<ul>
<li>
<h3>结构伪类选择器1</h3>
<ul>
<li>结构伪类选择器1_1</li>
<li>结构伪类选择器1_2</li>
<li>结构伪类选择器1_3</li>
</ul>
</li>
<li>
<h3>结构伪类选择器2</h3>
<ul>
<li>结构伪类选择器2_1</li>
<li>结构伪类选择器2_2</li>
<li>结构伪类选择器2_3</li>
</ul>
</li>
<li>
<h3>结构伪类选择器3</h3>
<p>结构伪类选择器3_p1</p>
<ul>
<li>结构伪类选择器3_1</li>
<li>结构伪类选择器3_2</li>
<li>结构伪类选择器3_3</li>
</ul>
<p>结构伪类选择器3_p2</p>
</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单伪类选择器</title>
<style>
/*选中有效的表单元素*/
input:enabled {background-color: lightblue;}
/*选中禁用的表单元素*/
input:disabled {background-color: lightgreen;}
/*选中必填的表单元素*/
input:required {background-color: lightpink;}
</style>
</head>
<body>
<h1>新用户注册</h1>
<form action="" method="">
<p>
<label>用户：</label>
<input type="text" name="usename" id="usename" value="" required="required" />
</p>
<p>
<label>密码：</label>
<input type="password" name="password" id="password" value="" />
</p>
<p>
<label>禁用：</label>
<input type="text" name="jy" id="jy" value="禁用" disabled="disabled" />
</p>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
