CSS选择器介绍与实例
一、元素按显示方式分为哪几种, 并举例, 正确描述它们
1.1 元素按显示方式分为3种
+ 块级元素
单独占一行，自动充满父元素，需要设置宽高，可容纳其他子元素
常用于网页布局和网页结构的搭建
例如：`<div>`, `<ul+li>`, `<table>`,`<p>`, `<h1-h6>`
+ 行内元素
不占有独立的区域，不可以设置宽高
常用于控制页面中文本的样式
例如：`<span>`,`<em>`,`<strong>`,`<a>`
+ 行内块元素
和相邻行内元素在一行，可以设置宽高
例如：`<input>`,`<img>`
1.2 显示方式转换
+ 块级元素转行内元素
`display:inline;`
+ 行内元素转块级元素
`display:block;`
块级元素、行内元素转行内块元素
`display:inline-block;`
---
二、CSS是什么? 它的主要作用是什么?
2.1 CSS是层叠样式表(Cascading Style Sheets)
2.2 CSS是用来设置页面中的元素样式和布局的
---
三、什么是CSS选择器,它的样式声明是哪二部分组成?
3.1 CSS中，选择器是一种模式，用于选择需要添加样式的元素。
3.2 样式声明由属性和属性值两部分组成
---
四、举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单选择器</title>
<style>
/* 元素选择器 */
h1 {
color: #ff0000;
}
/* 属性选择器 */
p[id="one"] {
background-color: red;
}
/* 类选择器 */
.two {
background-color: orange;
}
/* ID选择器 */
#three {
background-color: yellow;
}
/* 群组选择器 */
.four,
#five {
background-color: green;
}
/* 通配符选择器 */
article * {
font-style: italic;
}
</style>
</head>
<body>
<article>
<h1>长歌行</h1>
<h5>作者：汉乐府</h5>
<p id="one">青青园中葵，朝露待日晞。</p>
<p class="two">阳春布德泽，万物生光辉。</p>
<p id="three">常恐秋节至，焜黄华叶衰。</p>
<p class="four">百川东到海，何时复西归？</p>
<p id="five">少壮不努力，老大徒伤悲。</p>
</article>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
---
五、举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>上下文选择器</title>
<style>
/* 后代选择器 */
article p {
background-color: lightgray;
}
/* 父子选择器 */
article>h5 {
font-style: italic;
}
/* 同级相邻选择器 */
.two+* {
color: red;
}
/* 同级所有选择器 */
#one~* {
text-align: center;
}
</style>
</head>
<body>
<article>
<h1>长歌行</h1>
<h5>作者：汉乐府</h5>
<p id="one">青青园中葵，朝露待日晞。</p>
<p class="two">阳春布德泽，万物生光辉。</p>
<p id="three">常恐秋节至，焜黄华叶衰。</p>
<p class="four">百川东到海，何时复西归？</p>
<p id="five">少壮不努力，老大徒伤悲。</p>
</article>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
---
六、举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>结构伪类选择器</title>
<style>
/* article元素的第1个子元素 */
article>:first-child {
background-color: red;
}
/* rticle元素的第4个子元素 */
article>:nth-child(4){
background-color:orange;
}
/* article元素的下类型为p的奇数索引的子元素 */
article>p:nth-child(odd){
color: green;
}
/* 限定类型改写 */
article>h1:first-of-type{
background-color: red;
}
article>p:nth-of-type(even){
color: blue;
}
</style>
</head>
<body>
<article>
<h1>长歌行</h1>
<h5>作者：汉乐府</h5>
<p id="one">青青园中葵，朝露待日晞。</p>
<p class="two">阳春布德泽，万物生光辉。</p>
<p id="three">常恐秋节至，焜黄华叶衰。</p>
<p class="four">百川东到海，何时复西归？</p>
<p id="five">少壮不努力，老大徒伤悲。</p>
</article>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
---
七、举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单伪类选择器</title>
<style>
input:required{
border-color: red;
}
input:optional {
border-color: gray;
}
input:checked+* {
font-style: italic;
}
input:enabled {
background-color: lightpink;
}
input:disabled {
background-color: lightgray;
}
</style>
</head>
<body>
<form action="" method="post">
<table border="1" cellspacing="0" cellpadding="5" width="500">
<caption>
<h3>用户注册</h3>
</caption>
<thead>
<tr>
<th>字段</th>
<th>信息</th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username" maxlength="20" required></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="password" id="password" placeholder="英文字母，数字，下划线"
maxlength="40" disabled>
</td>
</tr>
<tr>
<td><label for="male">性别</label></td>
<td>
<input type="radio" name="gender" id="male" value="male" checked><label for="male">男</label>
<input type="radio" name="gender" id="female" value="female"><label for="female">女</label>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<textarea name="content" id="content" cols="80" rows="10" placeholder="个人简介"></textarea>
</td>
</tr>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例