一.元素显示方式分为哪几种，并举例，正确描述它们？
块级元素和行内元素
描述：块级元素：如div、table、p等
（1）遵循最大化原则（2）总是独占一行，自动充满父元素的内容区 （3）块级元素两边不允许有其他元素（4）块级元素在没有内容的情况下需要设置宽高否则无法感知存在
行内元素：如span、input、strong、a等
（1）遵循最小化原则（2）总是在一行文本元素的内部生成，无法设置宽高
二.css是什么？它的主要作用是什么？
是什么：层叠样式表 主要作用：用来设置页面中的元素和布局
三.什么是css选择器，它的样式声明有哪两部分组成？
css选择器：选择器是一种模式，用于选择所需要的样式
样式声明：[code] 选择器{样式}
四.举例演示css简单选择器
总结：当元素选择器、类选择器、Id选择器同时存在时ID选择器的优先级>类选择器>元素选择器
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 通配符选择器 */
* {
background-color: burlywood;
}
/*
元素选择器
选择标签ul将字体颜色设为绿色
*/
ul {
color: green;
}
/* 属性选择器 */
/* 选择设有class属性的p标签 */
p[class] {
color: blue;
}
p[class='book'] {
color: greenyellow;
}
/* 类选择器 优先级大于元素选择器*/
.book {
background-color: blue;
}
/* id选择器优先级大于类选择器 */
#game {
background-color: gray;
}
/*
群组选择器
选择有class=xi的元素 以及 h2 标签
但游戏为变色因为他有一个id上面给他设置了css说明id选择器优先级大于群组选择器
*/
.xi, h2{
background-color: red;
}
</style>
</head>
<body>
<h2>举例演示css简单选择器</h2>
<ul>
<li class="book">
<h2>图书</h2>
<ul>
<li class="xi">西游记</li>
<li>水浒传</li>
</ul>
</li>
</ul>
<ul>
<li>
<h2 id="game">游戏</h2>
<ul>
<li>英雄联盟</li>
<li>王者荣耀</li>
</ul>
</li>
</ul>
<ul>
<li>
<h2>音乐</h2>
<ul>
<li>英雄联盟</li>
<li>王者荣耀</li>
</ul>
</li>
</ul>
<p class="">阿斯达所大润肺委托人味儿</p>
<p>阿斯达所大润肺委托人味儿</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五.举例演示css上下文选择器
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 后代选择器 */
div h2{
color: blue;
}
/* 父子选择器因为div中的h2与article不是父子关系所以不匹配 */
article > h2{
color: green;
}
/* 同级相邻选择器 +选择相邻的*/
.baidu + h2{
color: black;
}
/* 同级所有选择器 ~选择所有同级的*/
.ali ~ h2{
color: skyblue;
}
</style>
</head>
<body>
<article>
<h2>举例演示css上下文选择器</h2>
<div>
<h2 class="baidu">百度</h2>
<h2>阿里</h2>
<h2>腾讯</h2>
</div>
<div>
<h2 class="ali">阿斯顿</h2>
<h2>阿萨德法</h2>
<h2>阿萨</h2>
</div>
<h2>英雄联盟</h2>
<h2>QQ飞车</h2>
</article>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六.举例演示常用伪类选择器
总结：伪类选择器本质上也属于class级别的选择器，优先级小于id选择器大于标签选择器
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 结构伪类选择器 */
/* 选中所有ul下的第三个子元素也可以写成ul>nth-child()*/
ul > :nth-child(2){
color: red;
}
/* 匹配第一个ul元素中的第二个子元素 */
ul:first-child > :nth-child(2){
color: green;
}
/* 匹配第一个ul元素中的最后一个子元素优先级高于上面的 */
ul:first-child>:last-child{
color: blue;
}
/* 匹配第一个ul元素中的最后一个子元素的所有li子元素 */
ul:first-child>:last-child li:nth-child(n+1){
background-color: orange;
}
/* 匹配所有ul标签的倒数第二个子元素 */
ul>:nth-last-child(2){
background-color: yellow;
}
/* 匹配ul元素中的唯一子元素 */
ul:only-child{
background-color: greenyellow;
}
</style>
</head>
<body>
<h2>举例演示常用伪类选择器</h2>
<div>
<ul>
<li>
<h2>爱好</h2>
<ul>
<li>看书</li>
<li>打游戏</li>
<li>听音乐</li>
<li>
<span>运动</span>
<ul>
<li>羽毛球</li>
<li>乒乓球</li>
<li>桌球</li>
<li>篮球</li>
</ul>
</li>
</ul>
</li>
<li>
<h2>电影</h2>
<ul>
<li>恶人转</li>
<li>复仇者联盟</li>
<li>钢铁侠</li>
<li>美国队长</li>
</ul>
</li>
<li>
<h2>动漫</h2>
<ul>
<li>死神</li>
<li>火影</li>
<li>家庭教师</li>
<li>海贼王</li>
</ul>
</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七.举例演示常用表单伪类选择器
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 选择每个启用的input元素 */
input:enabled{
background-color: red;
}
/* 选择每个被禁用input标签 */
input:disabled{
background-color: green;
}
input:required{
background-color: yellow;
}
input:checked{
background: greenyellow;
}
/* 选择不包含required属性的input标签覆盖了disabled和enabled */
input:optional{
background: greenyellow;
}
</style>
</head>
<body>
<h2>举例演示常用表单伪类选择器</h2>
<form action="register.php" method="post">
<p>
<label for="username">姓名：</label>
<input type="text" name="username" id="username" placeholder="请输入姓名" disabled=""/><br />
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="请输入不得少于6位密码" required /><br />
</p>
<p>
<label for="mail">邮箱：</label>
<input type="email" name="mail" id="mail" placeholder="123456@qq.com"/><br />
</p>
<label for="address">住址：</label>
<select name="address">
<optgroup label="江苏">
<option value="南通">南通</option>
<option value="无锡">无锡</option>
<option value="南京" selected="">南京</option>
</optgroup>
<optgroup label="江西">
<option value="南昌">南昌</option>
<option value="景德镇">景德镇</option>
</optgroup>
</select><br />
<label for="man">性别：</label>
<input type="radio" name="sex" id="man" checked=""/><label for="man">男</label>
<input type="radio" name="sex" id="woman" /><label for="woman">女</label><br />
<label for="">爱好：</label>
<input type="checkbox" name="hoppy" id="book" checked="" /><label for="book">看书</label>
<input type="checkbox" name="hoppy" id="basketball" /><label for="basketball">篮球</label>
<input type="checkbox" name="hoppy" id="code" /><label for="code">敲代码</label>
<input type="checkbox" name="hoppy" id="game" disabled=""/><label for="game">打游戏</label><br />
<button>提交</button>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例