一、 元素按显示方式分为哪几种, 并举例, 正确描述它们
1、块级框，对应块级元素：遵循最大化原则，总是独占一行，自动充满父级元素的内容区，且两边不允许有任何其他元素，自动在没有内容撑开的情况下, 需要设置宽高,否则无法感知存在。例如：<div>、<ul+li>、<table>、<p>
2、行内框，对应行内元素：遵循最小化原则，总是在一行文本元素的内部生成，它的宽高由所在行决定，不可以设置。例如：<span>、<input>、<strong>、<a>
二、 CSS是什么? 它的主要作用是什么?
CSS是层叠样式表，主要作用是用来设置HTML元素在文档中的布局与显示方式
三、 什么是CSS选择器,它的样式声明是哪二部分组成?
1、CSS选择器就是用于选择需要加载CSS样式的元素
2、样式声明是由“属性”和“值”两部分组成组成
四、举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*元素选择器，选择指定的所有P标签*/
P {
color: green;
}
/*属性选择器，选择所有指定的属性或者属性值*/
p[class]{
color: lightgray;
}
p[class="red"]{
color: red;
}
p[id="blue"]{
color: blue;
}
/*类选择器, 对应标签中的class属性*/
.red{
background-color:yellow;
}
/*ID选择器, 对应标签中的id属性,级别最高*/
#blue {
background-color: lightgray;
}
/*群组选择器，选中所有red和h2属性*/
.red,h2 {
background-color:lightcyan;
}
/*通配符选择器*/
body * {
font-size: 2rem;
}
</style>
</head>
<body>
<p>测试的第一步</p>
<p class="red">测试的第二步</p>
<p class="red" id="blue">测试的第三步</p>
<p>测试的第四步</p>
<h2>测试的第五步</h2>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器/结构选择器</title>
<style>
/*后代选择器，空格表示子级孙级h2都被选中，>表示只选择子级*/
section h2 {
color: green;
}
/*父子选择器*/
section > h2 {
color: red;
}
/*同级相邻选择器*/
#item + * {
background-color: lightblue;
}
/*同级所有选择器*/
#item ~ * {
background-color: lightpink;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="item">测试第一步</h2>
<h2>测试第二步</h2>
<h2>测试第三步</h2>
</div>
<h2>测试第四步</h2>
<h2>测试第五步</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六、举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<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: lightcoral;
}
/*选中最后一个ul中的最后一个子元素*/
ul:first-child > :last-child {
background-color: lightpink;
}
/*选中最后一个子元素中类型为<p>*/
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;
}
/*限定类型的伪类*/
/*选中最后一个子元素中类型为<p>*/
ul:first-of-type > :last-of-type > p:nth-of-type(n+1) {
background-color: cyan;
}
</style>
</head>
<body>
<ul>
<li>
<h3>购物车</h3>
<ul>
<li>苹果</li>
<li>梨子</li>
<li>芒果</li>
</ul>
</li>
<li>
<h3>工作计划</h3>
<ul>
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ul>
</li>
<li>
<h2>重要通知</h2>
<p>全体加班</p>
<ul>
<li>第一组</li>
<li>第二组</li>
<li>第三组</li>
</ul>
<p>关于补助</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七、举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>
input:enabled {
background-color: lightblue;
}
input:disabled {
background-color: red;
}
input:required {
background-color: yellow;
}
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
八、总结
引入css样式表，通过操作选择器和伪类，可以对网页中指定的元素或者表单进行样式控制
选择器
*后代选择器: `空格`, 如 `div p`, `body *`
* 父子选择器: `>`, 如 `div + h2`
* 同级相邻选择器: `+`, 如 `li.red + li`
* 同级所有选择器: `~`, 如 `li.red ~ li`非限定类型
* `:nth-child(n)`: 匹配父元素中指定索引的子元素
* `:first-child`: 匹配父元素中的第一个子元素
* `:last-child`: 匹配父元素中的最后一个子元素
* `:nth-last-child(n)`: 匹配从父元素中倒数选择子元素
* `:only-child`: 匹配父元素中的唯一子元素限定类型
* `selector:nth-of-type(n)`: 匹配父元素中指定索引的子元素
* `selector:first-of-type`: 匹配父元素中的第一个子元素
* `selector:last-of-type`: 匹配父元素中的最后一个子元素
* `selector:nth-last-of-type(n)`: 匹配从父元素中倒数选择子元素
* `selector:only-of-type`: 匹配父元素中的唯一子元素表单伪类
* `:enabled`: 选择每个启用的 `<input>` 元素
* `:disabled`: 选择每个禁用的 `<input>` 元素
* `:checked`: 选择每个被选中的 `<input>` 元素
* `:required`: 包含`required`属性的元素
* `:optional`: 不包含`required`属性的元素
* `:valid`: 验证通过的表单元素
* `:invalid`: 验证不通过的表单
*: `:read-only`: 选择只读表单元素
