css选择器的应用的实验,HTML&CSS实验(3)---掌握CSS选择器的使用方法

【实验题目】HTML&CSS实验(3)

【实验目的】掌握CSS选择器的使用方法。

----------------------个人作业，如果有后辈的作业习题一致，可以参考学习，一起交流，请勿直接copy

【调试工具】浏览器和编辑器。三种可选编辑方式：

(1) 本地调试：记事本

【实验内容】

本次实验不使用单个子女选择器(nth-child)和子女类型选择器(nth-of-type)。

1、为网页song1.html加上选择器后尽量得到如下效果(文字)：

完成后进行保存(song1.html)并截屏浏览器(ctrl+alt+PrintScreen)：

样式表：

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}

2、为网页song2.html加上选择器后尽量得到如下效果：

完成后进行保存(song2.html)并截屏浏览器：

样式表：

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%;}//自行添加的部分

3、为网页song3.html加上选择器后尽量得到如下效果：

完成后进行保存(song3.html)并截屏浏览器(ctrl+alt+PrintScreen)：

样式表：

em{font-weight:bolder;color:blue;}

{color:brown;}

em+span,b+span{color:red;}

span+span{color:green;}

b{text-decoration:underline;}

(前两个小黄鹂：)

4、为网页song4.html加上属性选择器(利用title属性)后尽量得到如下效果：

完成后用文件song4.html保存该网页并截屏浏览器(ctrl+alt+PrintScreen)：

样式表：

.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}//自行添加的部分

【完成情况】

是否完成了这些步骤？(√完成  ×未做或未完成)

1 [√]  2 [√ ]  3 [√ ]  4 [√ ]

【实验体会】

写出实验过程中遇到的问题，解决方法和自己的思考;并简述实验体会(如果有的话)。

刚开始完成第一个实验样例时还觉得比较简单，很顺利地完成了。但是在完成之后的几个样例的过程中，实现显得异常艰难，因为不可以用结构伪类的子女选择器，而且刚开始以为只可以用老师给定的样式在其中选择，自己既不可以添加新的style语句，也不能修改或者定义元素的类或者id，连编写内联元素都不可以。

因为以上的(可能是我个人的误区，也或者本来老师就是禁止使用上面的内容)原因，自己尝试了诸多方法，W3S上也仔仔细细翻看过，尝试了各种选择器的组合变化，都不可以。最后思考询问了一些同学，得到的结果是：不可以用结构伪类的子女选择器，也不能修改或者定义元素的类或者id；但是添加新的style语句和编写内联元素应该是可以的，于是就通过这两个方法来实现了。

自己思索尝试了很久，但是之前所说的4种方法都不用就实现类似的样例，在我现在的水平而言，实在是想不出办法；所以在实验中使用了添加新的style语句和编写内联元素这两个方法。