CSS的作用是用来设置HTML元素在文档中的布局与显示方式，如何才能在茫茫的元素中找到指定的元素，我们需要使用CSS选择器，本博文就CSS基础与选择器进行了总结。
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: red;
}
/*属性选择器*/
p[class="p2"] {
color: yellow;
}
/*类/class选择器*/
.p3{
color: pink;
}
/*ID选择器*/
#p1{
color: green;
}
/*群组选择器*/
p, h2{
background-color: lightblue;
}
/*通配符选择器*/
*{
font-size: 2rem;
}
</style>
</head>
<body>
<p class="p1" id="p1">制度优势如何成为治理体系和治理能力优势</p>
<p class="p2">法国总统将访华 外国领导人将出席第二届进博会</p>
<p class="p3">系统集成 协同高效 改革协调推进</p>
<h2>第二届进博会11月5日开幕 凸显五大亮点</h2>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器/结构选择器</title>
<style>
/*后代选择器*/
section h2{
color: red;
}
/*父子选择器*/
section > h2{
color: blue;
}
/*同级相邻选择器*/
#item + h2{
background-color: yellow;
}
/*同级所有选择器*/
#item ~ h2{
color: pink;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="item">希望工程“大眼睛”为什么能够牵动亿万人心？</h2>
<h2>从顶级盛会看开放中国</h2>
<h2>一图看懂：中国极地科考船“雪龙”号怎样到达南极</h2>
</div>
<h2>中科院实验室"种"出钻石：7天长1克拉 纯净度不输天然钻石</h2>
<h2>全国起床困难户地图来了！看看谁家是“特困户”</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>
<ul>
<li>MacBook Pro 笔记本一台</li>
<li>iPhone X Max 手机一部</li>
<li>SONY A7M3 相机一部</li>
</ul>
</li>
<li>
<h3>工作计划</h3>
<ul>
<li>准备录制前端开发实战课程</li>
<li>Laravel项目开发全程实录</li>
<li>编写前端开发实例大全电子书</li>
</ul>
</li>
<li>
<h2>重要通知</h2>
<p>今天开始,为了赶项目,全公司开始进入加班模式,具体安排如下:</p>
<ul>
<li>开发部: 19:00 - 24:00</li>
<li>市场部: 19:00 - 23:00</li>
<li>销售部: 19:00 - 22:00</li>
</ul>
<p>凡加班人员, 提供免费晚餐, 滴滴补助, 不愿回家,可报住宿费200/人</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
上述代码和总结中涉及知识点注释总结：
1. 元素的类型
2.元素的显示方式
3.CSS 是什么,有什么用
4. 使用CSS的方式
5.选择器的使用