1.元素按显示方式分为哪几种, 并举例, 正确描述它们
元素按显示方式分为行内元素和块元素。行内元素的宽高, 由它内部的内容决定,块级元素的宽高, 是由它内部的子元素决定，一般来说, 块级元素内,可以嵌套行内元素, 反过来就不允许(可用display改变)。
2.CSS是什么? 它的主要作用是什么?
CSS是层叠样式表（英文全称：Cascading Style Sheets）。它的主要作用是用来设置HTML元素中文档中的布局与显示方式。
3.什么是CSS选择器,它的样式声明是哪二部分组成?
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。它的样式声明是由属性和属性值组成的。
4.举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单选择器</title>
<style>
/*元素选择器*/
p{
color: blue;
}
/*属性选择器*/
p[class="p2"] {
color: red;
}
/*类/class选择器*/
.p3{
color: green;
}
/*ID选择器*/
#p1{
color: black;
}
/*群组选择器*/
p, h2{
background-color: lightblue;
}
/*通配符选择器*/
*{
font-size: 2rem;
}
</style>
</head>
<body>
<p class="p1" id="p1">p1文字1</p>
<p class="p2">p2文字</p>
<p class="p3">p3文字</p>
<h2>h2文字</h2>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style>
/*后代选择器*/
section h2{
color: green;
}
/*父子选择器*/
section > h2{
color: red;
}
/*同级相邻选择器*/
#item + h2{
background-color: yellow;
}
/*同级所有选择器*/
#item ~ h2{
color: pink;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="item">h2文字1</h2>
<h2>h2文字2</h2>
<h2>h2文字3</h2>
</div>
<h2>h2文字4</h2>
<h2>h2文字5</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
6.举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*选中所有ul下面的第二个子元素*/
ul > :nth-child(2){
color: red;
}
/*选中所有ul下面的第一个子元素*/
ul > :first-child{
color: blue;
}
/*第一个ul下面的最后一个子元素*的所有类型为p的元素*/
ul:first-child > :last-child >p:nth-child(n+1){
color: yellow;
}
/*用限定类型的伪类选中第一个ul下面的最后一个子元素的所有类型为li的元素*/
ul:first-of-type > :last-of-type li:nth-of-type(n+1){
color: green;
}
</style>
</head>
<body>
<ul>
<li>
<h3>h3文字1</h3>
<ul>
<li>li文字1</li>
<li>li文字2</li>
<li>li文字3</li>
</ul>
</li>
<li>
<h3>h3文字2</h3>
<ul>
<li>li文字2-1</li>
<li>li文字2-2</li>
<li>li文字2-3</li>
</ul>
</li>
<li>
<h3>h3文字3</h3>
<p>p文字1</p>
<ul>
<li>li文字3-1</li>
<li>li文字3-2</li>
<li>li文字3-3</li>
</ul>
<p>p文字2</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
7.举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>
/*选择每个启用的 <input> 元素*/
input:enabled{
background-color: yellow;
}
/*选择每个禁用的 <input> 元素*/
input:disabled{
background-color: pink;
}
/*选择每个被选中的 <input> 元素*/
input:checked{
background-color: blue;
}
/*包含required属性的元素*/
input:required{
background-color: red;
}
</style>
</head>
<body>
<h2>用户登录</h2>
<form action="" method="post">
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required placeholder="example@email.com">
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required placeholder="不得少于6位">
</p>
<p>
<label for="save" >保存密码:</label>
<input type="checkbox" id="save" name="save" checked readonly>
</p>
<p>
<label for="save_time">保存期限:</label>
<select name="save_time" id="save_time">
<option value="7" selected>7天</option>
<option value="30">30天</option>
</select>
</p>
<p>
<input type="hidden" name="login_time" value="登陆时间戳">
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
</p>
<script>
document.querySelector('[type="hidden"]').value = new Date().getTime()
</script>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
