2017年5月17号 星期三 空气质量：中度污染 温度：19~34℃
内容：
CSS：标签选择器，id选择器，类选择器，基本选择器的优先级，元素样式的继承性，并集选择器，交集选择器；
后代选择器，子选择器，相邻兄弟选择器，通用兄弟选择器，结构伪类选择器，属性选择器；
一、标签选择器
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标签选择器</title>
<!-- 需求 ： 将页面中所有的p 元素中的内容
字体大小变成25px 颜色是红色-->
<style type="text/css">
p{
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
二、id选择器
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>id选择器</title>
<!-- 需求 ： 将页面中id属性值是 name的元素
字体大小变成25px 颜色是红色-->
<style type="text/css">
#name{ /* id的属性值 必须是页面中唯一的！*/
font-size: 25px; /* 字体大小*/
color: red;/* 字体颜色*/
}
</style>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<div id="name">div1</div>
<div id="name1">div2</div>
<div id="name2">div3</div>
</body>
</html>
三、类选择器
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>类选择器</title>
<!-- 需求 ： 将页面中class属性值是 name的元素
字体大小变成25px 颜色是红色-->
<style type="text/css">
.name{ /* class的属性值 页面中可以有多个！*/
font-size: 25px; /* 字体大小*/
color: red;/* 字体颜色*/
}
</style>
</head>
<body>
<p>段落1</p>
<p class="name">段落2</p>
<p>段落3</p>
<div class="name">div1</div>
<div class="name">div2</div>
<div >div3</div>
</body>
</html>
四、基本选择器的优先级
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>基本选择器的优先级</title>
<!-- 需求 ：
01.给p元素 增加id 属性值是 name
02.给p元素 增加class 属性值是 d
03.分别使用
标签选择器 字体大小变成25px 颜色是红色
类选择器 字体大小变成25px 颜色是绿色
id选择器 字体大小变成25px 颜色是粉色
优先级
id选择器 > 类选择器 > 标签选择器
-->
<style type="text/css">
p{/*标签选择器*/
font-size: 25px;
color: red;
}
.d{/*类选择器 */
font-size: 25px;
color: green;
}
#name{/*id选择器 */
font-size: 25px;
color: pink;
}
</style>
</head>
<body>
<p id="name" class="d">段落</p>
</body>
</html>
五、元素样式的继承性
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>元素样式的继承性</title>
<style type="text/css">
div{ /* 01.只给div 设置样式 默认p 也会有div样式*/
font-size: 25px;
color: red;
}
p{ /*02.给p元素也设置了样式，p就使用自己的样式*/
font-size: 50px;
color: pink;
}
</style>
</head>
<body>
<div>
div1
<p>
段落1
</p>
</div>
</body>
</html>
六、并集选择器
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>并集选择器</title>
<!-- 需求：
给 01.id属性值是s的元素
02.class属性值是pan的元素
03.标签是div的元素
设置相同样式
-->
<style type="text/css">
/*并集选择器 多个选择器之前使用,隔开*/
#s,.pan,div{
color: red;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span id="s">span1</span>
<span class="pan">span2</span>
</body>
</html>
七、交集选择器
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>交集选择器</title>
<!-- 需求：
给 01.class属性值是pan的元素
02.并且是div标签的元素
-->
<style type="text/css">
/*交集选择器 连着写，没有分隔符 必须是标签选择器 在前
格式：1.标签选择器+类选择器
2.标签选择器+id选择器*/
div.pan{
color: red;
}
</style>
</head>
<body>
<div id="s">div1</div>
<div class="pan">div2</div>
<span>span1</span>
<span class="pan">span2</span>
</body>
</html>
八、后代选择器
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>后代选择器</title>
<!--
需求：
改变 body中所有的span元素的样式（后代！）
-->
<style type="text/css">
/* 后代选择器 父元素 空格 后代元素 */
body span{
color:red;
}
</style>
</head>
<body>
<div>
<span>孙子span1</span>
</div>
<div>
<span>孙子span2</span>
</div>
<span>子span1</span>
<span>子span2</span>
</body>
</html>
九、子选择器
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>子选择器</title>
<!--
需求：
改变 body中所有的子元素span的样式
-->
<style type="text/css">
/* 子选择器 父元素>子元素 */
body>span{
color:red;
}
</style>
</head>
<body>
<div>
<span>孙子span1</span>
</div>
<div>
<span>孙子span2</span>
</div>
<span>子span1</span>
<span>子span2</span>
</body>
</html>
十、相邻兄弟选择器
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<!--
需求：
改变id属性值是m 的 下一个span兄弟节点的样式
-->
<style type="text/css">
/* 相邻兄弟选择器 元素+相邻元素 */
#m+span{
color:red;
}
</style>
</head>
<body>
<div>
<span>孙子span1</span>
</div>
<div id="m">
<span>孙子span2</span>
</div>
<span>子span1</span>
<span>子span2</span>
<span>子span3</span>
<span>子span4</span>
</body>
</html>
十一、通用兄弟选择器
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<!--
需求：
改变id属性值是m 的 后面所有span兄弟节点的样式
-->
<style type="text/css">
/* 通用兄弟选择器 元素~相邻元素 */
#m~span{
color:red;
}
</style>
</head>
<body>
<div>
<span>孙子span1</span>
</div>
<div id="m">
<span>孙子span2</span>
</div>
<span>子span1</span>
<span>子span2</span>
<span>子span3</span>
<span>子span4</span>
</body>
</html>
十二、结构伪类选择器
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<!-- 不需要在节点上 增加 额外的属性！ 结构伪类选择器-->
<style type="text/css">
/*01.改变ul中第一个li元素的样式 颜色是红色
ul li:first-child{
color: red;
}
*/
/*02.改变ul中最后一个li元素的样式 颜色是红色
ul li:last-child{
color: red;
}
*/
/*03.改变页面中第3个p标签 颜色是红色 ! 只看顺序 不看类型！
001.无论p标签隐藏的多深！ 始终是自上而下的第三个p标签
002.body节点下面第3个元素 如果是p 就显示样式
body p:nth-child(3){
color: red;
}
*/
/*04.改变页面中第2个p标签 颜色是红色
先看类型 再看顺序
body p:nth-of-type(2){
color: red;
}
*/
/* 05.改变第一个ul中的第一个li 的样式 颜色是红色 */
ul:nth-of-type(1) li:nth-of-type(1){
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<span>span</span>
<p>p2</p>
<p>p3</p>
<ul>
<li>u1li1</li>
<li>u1li2</li>
<li>u1li3</li>
<li>u1li4</li>
</ul>
<ul>
<li>u2li1</li>
<li>u2li2</li>
<li>u2li3</li>
<li>u2li4</li>
</ul>
</body>
</html>
十三、属性选择器
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>属性选择器 </title>
<style type="text/css">
/* 01.选取带有id属性的p元素
p[id]{
color: red;
}
*/
/*02.选取id属性值是a的p元素
p[id="a"]{
color: red;
}
*/
/*03.选取id属性值是a开头的p元素
p[id^="a"]{
color: red;
}
*/
/*04. 选取id属性值是c结尾的p元素
p[id$="c"]{
color: red;
}
*/
/*05.选取id属性值包含b的p元素*/
p[id*="b"]{
color: red;
}
</style>
</head>
<body>
<p id="a">第1个段落</p>
<p id="b">第2个段落</p>
<p id="abc">第3个段落</p>
<p id="bc">第4个段落</p>
<p >第5个段落</p>
</body>
</html>
十四、作业和考试
1、作业：预习CSS美化，写MindManager笔记，把CSS看完
2、考试：
2017.05.17
15:38 开始，16: 30 结束；答题时间： 50 分钟；检查时间:2 分钟；
成绩： 92 - 4 = 88分
听歌答题好像会降速，以后注意调节（除非答题环境太吵否则少听歌），
感觉今天的分数有运气成分，关于CSS书写规范有百度两道题（应扣除）
十五、老师辛苦了！
