HTML&CSS实验(4)---学习CSS选择器的使用方法
【实验题目】HTML&CSS实验(4)
【实验目的】学习CSS选择器的使用方法。
----------------------个人作业，如果有后辈的作业习题一致，可以参考学习，一起交流，请勿直接copy
【调试工具】浏览器和编辑器。三种可选编辑方式：
(1) 本地调试：记事本
(2) 在线调试：http://172.18.187.11:8080/lab/html4/index.jsp
* 在线图像存放地点：http://172.18.187.11:8080/lab/html4/images
【实验要求】
除了题目中有说明，本次实验均不使用连接符~和+，也不能自行加id和class，不能修改正文（<body>的内容），只能按题意增加或修改样式(<style>的内容)。
不能用!important。
【实验内容】
1、为网页sohu.html添加样式。首先要求对于链接的访问，平时和访问过的链接都没有下划线并且显示为黑色字，鼠标移动到链接上方时链接文字显示下划线和蓝色字，点击(按下)链接时链接文字显示下划线并且变为红色字；然后，设计样式让每行的偶数链接显示绿色字并且没有下划线(如下图所示)，悬浮和活动链接与原来一样。
参考效果：
完成后保存网页(sohu.html)并截屏浏览器(ctrl+alt+PrintScreen)：
样式表：
可行√
不可行:最后一句的伪类属性无法作用
l a无法适应于nth-child，选择odd时全选，选择even时不执行；
l li可使用nth-child但必须结合a的伪类选择器使用（不结合a则无显示，因为li没有直接的文字内容）；
l 单纯在a的标签下修改颜色，使用伪类选择器可执行（优先级问题，伪类选择器优先于元素选择器）；但是如果利用nth-child伪类选择器选择之后，同时使用伪类选择器，那么伪类选择器的内容不会被执行（前者的优先级高，会覆盖伪类选择器），需要重新编写一遍偶数的伪类链接效果。
l 综上考虑到这个原因，可以通过利用nth-child伪类选择器全选，来提高其链接伪类语句的优先级，如下：可正常执行。
可行√
2、为网页register.html添加样式，使得：被聚焦的输入域的背景变为黄色，单选或多选的选中项的文字显示为红色字；disabled的按钮的字体显示为灰色字；textarea中选中的文字颜色变为白色，背景变为蓝色。
参考效果：
完成后进行保存(register.html)并截屏浏览器：
样式表：
//重新阅读了老师的表单样例，对表单的实现有了新的理解，也发现了之前没有找到的可以实现边框带文字的<legend>标签（仅用于表单<form>）
3、(sohu1.html)实现下图样式。注意：除了加指定的选择器，不要修改任何代码。参考效果：
完成后保存网页(sohu1.html)并截屏浏览器(ctrl+alt+PrintScreen)：
样式表：
l 第三个选择器的even不会覆盖第二个选择器的3~9之间的样式，所以第二个选择器要加上not的内容（同样是优先权的原因）
l 并列的内容中不可以有空格，如果“:not”之前有空格，则浏览器不会执行这一选择器的内容
4、为网页ZhuZiQing.html加上选择器，使得:
(1) 链接和访问过的链接显示为蓝色字体并且没有下划线
(2) 按下链接显示为棕色字体且没有下划线
(3) 每个段落左对齐并且首行缩进两个字
(4) 每个段落首字母为1个半字大小
(5) 每个段落第一行用斜体字
(6) 鼠标移动到段落上方时，段落文字显示为绿色字
(7) 偶数段落显示为粗体字
(8) 引用文献采用上标 {vertical-align:super;font-size:10px}
参考效果：
用文件ZhuZiQing.html保存完成后的网页并截屏浏览器(ctrl+alt+PrintScreen)：
样式表：
5、为网页(LotusPond .html)编写样式，使得其平时显示如下：
当把鼠标移动到某个段落(下面为第二段)上方时，显示如下：
用文件LotusPond .html保存完成后的网页并截屏浏览器(ctrl+alt+PrintScreen)：
样式表：
//同样的style格式，在不同的浏览器下，会有不同的表现形式，比如在如上截图的chrome中，hover的选择器选中之后，first-letter中的内容会一起作用，显示为蓝色大1.5倍；但是在edge中，则不会同时作用，而且hover离开后，作用效果会消失，变成普通字体，如下：
6、在网页(calendar.html)中增加选择器（不要改动样式的次序或增加样式）后得到如下网页显示：
用文件calendar.html保存完成后的网页并截屏浏览器(ctrl+alt+PrintScreen)：
样式表：
//如果最后一条语句不加“：after”，则这条语句不会作用-----:after 选择器在被选元素的内容后面插入内容，需要使用 content 属性来指定要插入的内容。（也就是说，如果使用content来插入内容，就必须使用：after选择器）
7、用网页(chess.html)设计一个国际象棋棋盘和棋子：
（1）设计棋盘并摆设棋子(棋子图像文件在images目录中)，只能使用标签h1、table、tr、td、img（已给出了它们的样式），不能使用其他标签，也不能使用类和id属性：
*其中的白色棋子不显眼
完成后截图：
//修改了h1的font-size为4倍，table和td的属性为-------border:solid 2px gray;
html文件的主要内容：
（2）按如下步骤和要求为棋盘加上样式：
A、一般状态下，每个格子(td)具有两种背景色(background-color)之一：rgb(100,100,100), rgb(200,200,200)。
B、鼠标移动到淡色格上方时，淡色格的背景色(background-color)变为rgb(200,200,240):
C、鼠标移动到深色格上方时，深色格的背景色(background-color)变为rgb(100,100,160):
D、当鼠标移到白色棋子(img)上方时，白色棋子边框显示黄色虚线border:dashed 1px yellow。参见步骤B和步骤C的图。
E、当鼠标移到黑色棋子(img)上方时，黑色棋子边框显示红色虚线border:dashed 1px red。参见步骤B和步骤C的图。
F、要求悬浮在棋子上时格子线不动。
用文件chess.html保存完成后的网页，当鼠标移到黑色棋子和白色棋子上分别截一幅图：
与步骤（1）相比，步骤（2）新增的样式表：
问题：为了实现步骤E增加的样式是什么？
tr:nth-child(-n+2) td>img:hover{
border:dashed 1px red;
}
问题：为了实现步骤F增加的样式是什么？
tr:nth-child(n+7) td>img:hover{
border:dashed 1px yellow;
margin:auto;
}
tr:nth-child(-n+2) td>img:hover{
border:dashed 1px red;
margin:auto;
}
//同样的，在这个例子中，使用同样的style，在不同的浏览器下会有不同的结果：在edge浏览器中，即使不加margin：auto；使其自动适应居中，也不会有table格线偏移的问题；但是在IE浏览器和chrome浏览器中如果不加，则会出现hover移动指向后出现格线偏移的后果，添加后正常。
【完成情况】
是否完成了这些步骤？(√完成 ×未做或未完成)
1 [√ ] 2 [√] 3 [√] 4 [√] 5 [√] 6 [√ ] 7(1)[ √] 7(2) [√ ]
【实验体会】
写出实验过程中遇到的问题，解决方法和自己的思考;并简述实验体会（如果有的话）。
在实验中遇到的问题在此前的分小节的实验样例中已经提到了问题和解决方法，在这里不详细描述，只列出总结要点：
l a无法适应于nth-child，选择odd时全选，选择even时不执行
l li可使用nth-child但必须结合a的伪类选择器使用（不结合a则无显示，因为li没有直接的文字内容）
l 单纯在a的标签下修改颜色，使用伪类选择器可执行（优先级问题，伪类选择器优先于元素选择器）；但是如果利用nth-child伪类选择器选择之后，同时使用伪类选择器，那么伪类选择器的内容不会被执行（前者的优先级高，会覆盖伪类选择器），需要重新编写一遍偶数的伪类链接效果
l 综上考虑到这个原因，可以通过利用nth-child伪类选择器全选，来提高其链接伪类语句的优先级即可正常执行
l 重新阅读了老师的表单样例，对表单的实现有了新的理解，也发现了之前没有找到的可以实现边框带文字的<legend>标签（仅用于表单<form>）
l 并列的内容中不可以有空格，如果“:not”之前有空格，则浏览器不会执行这一选择器的内容
l 相同优先权选择器的even不会覆盖第二个选择器的3~9之间的样式，所以第二个选择器要加上not的内容（同样是优先权的原因
l 同样的style格式，在不同的浏览器下，会有不同的表现形式，比如在chrome中，hover的选择器选中之后，first-letter中的内容会一起作用，显示为蓝色大1.5倍；但是在edge中，则不会同时作用，而且hover离开后，作用效果会消失，变成普通字体；在edge浏览器中，即使不加margin：auto；使其自动适应居中，也不会有table格线偏移的问题；但是在IE浏览器和chrome浏览器中如果不加，则会出现hover移动指向后出现格线偏移的后果，添加后正常。
l :after 选择器在被选元素的内容后面插入内容，需要使用 content 属性来指定要插入的内容。（也就是说，如果使用content来插入内容，就必须使用：after选择器）
如果说之前的Web设计编程只是把内容编写出来，应用一些css的style属性，那么这一部分就有些设计的成分在里面了。只是简单的style添加，就能体现出一些简单实用看上去舒服的设计感，虽然只是按照老师所给的模板来完成，但是仍旧让我感到新奇和激动，对今后的实验也越来越期待了。