【實驗題目】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选择器的使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。