【实验题目】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语句和编写内联元素这两个方法。

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