HTML&CSS实验(3)---掌握CSS选择器的使用方法
【实验题目】HTML&CSS实验(3)
【实验目的】掌握CSS选择器的使用方法。
----------------------个人作业，如果有后辈的作业习题一致，可以参考学习，一起交流，请勿直接copy
【调试工具】浏览器和编辑器。三种可选编辑方式：
(1) 本地调试：记事本
(2) 在线调试：http://172.18.187.11:8080/lab/html3/index.jsp
【实验内容】
本次实验不使用单个子女选择器（nth-child）和子女类型选择器（nth-of-type）。
1、为网页song1.html加上选择器后尽量得到如下效果(文字)：
完成后进行保存(song1.html)并截屏浏览器(ctrl+alt+PrintScreen)：
样式表：
<style type="text/css">
span{color:green}
p em{color:blue}
p.b{font-style:italic}
em{font-style:normal}
em:not(.class){font-size:larger}
#c{text-decoration:underline}
</style>
2、为网页song2.html加上选择器后尽量得到如下效果：
完成后进行保存(song2.html)并截屏浏览器：
样式表：
<style type="text/css">
ul ul{font-size:200%;}
#last,#first li+li+li{font-weight:bold;}
ul ul{color:green}
#last,.boat{font-style:italic}
#first li+li+li+li{color:blue}
ul ul ul{color:black}
ul ul ul{font-size:100%;}//自行添加的部分
</style>
3、为网页song3.html加上选择器后尽量得到如下效果：
完成后进行保存(song3.html)并截屏浏览器(ctrl+alt+PrintScreen)：
样式表：
<style type="text/css">
em{font-weight:bolder;color:blue;}
{color:brown;}
em+span,b+span{color:red;}
span+span{color:green;}
b{text-decoration:underline;}
</style>
（前两个小黄鹂：<b style="text-decoration:none">）
4、为网页song4.html加上属性选择器（利用title属性）后尽量得到如下效果：
完成后用文件song4.html保存该网页并截屏浏览器(ctrl+alt+PrintScreen)：
样式表：
<style type="text/css">
.erge a+a+a,.new div a{color:red}
.cool a+a+a{color:green}
.cool a+a+a+a+a,.new a+a+a+a,a[href*="i358"][title="拔萝卜"]{color:#0066CC}
.new a+a+a+a+a,.cool div a,.erge div a{font-style:italic}
.cool a+a,.erge a+a{font-style:normal}//自行添加的部分
</style>
【完成情况】
是否完成了这些步骤？(√完成 ×未做或未完成)
1 [√] 2 [√ ] 3 [√ ] 4 [√ ]
【实验体会】
写出实验过程中遇到的问题，解决方法和自己的思考;并简述实验体会（如果有的话）。
刚开始完成第一个实验样例时还觉得比较简单，很顺利地完成了。但是在完成之后的几个样例的过程中，实现显得异常艰难，因为不可以用结构伪类的子女选择器，而且刚开始以为只可以用老师给定的样式在其中选择，自己既不可以添加新的style语句，也不能修改或者定义元素的类或者id，连编写内联元素都不可以。
因为以上的（可能是我个人的误区，也或者本来老师就是禁止使用上面的内容）原因，自己尝试了诸多方法，W3S上也仔仔细细翻看过，尝试了各种选择器的组合变化，都不可以。最后思考询问了一些同学，得到的结果是：不可以用结构伪类的子女选择器，也不能修改或者定义元素的类或者id；但是添加新的style语句和编写内联元素应该是可以的，于是就通过这两个方法来实现了。
自己思索尝试了很久，但是之前所说的4种方法都不用就实现类似的样例，在我现在的水平而言，实在是想不出办法；所以在实验中使用了添加新的style语句和编写内联元素这两个方法。