css选择器的应用的实验,HTMLCSS实验(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語句和編寫內聯元素這兩個方法。
原文：http://www.cnblogs.com/nanashi/p/6685562.html
總結
以上是生活随笔為你收集整理的css选择器的应用的实验,HTMLCSS实验(3)---掌握CSS选择器的使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。
