學習總結(jié):一、標簽選擇器? ? 標簽選擇器其實就是html代碼中的標簽。如右側(cè)代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例如下面代碼：? ? ? ? ? p{font-size:12px;line-height:1.6em;}二、類選擇器? ?語法：. ? ? ?類選器名稱{css樣式代碼;}? 注意：? ? ? 1、英文圓點開頭? ? ? 2、其中類選器名稱可以任意起名（但不要起中文噢）? 使用方法：? ? ? ? 第一步：使用合適的標簽把要修飾的內(nèi)容標記起來，如下：? ? ? ? <span>膽小如鼠</span>? ? ? ? 第二步：使用class="類選擇器名稱"為標簽設(shè)置一個類，如下：? ? ? ? <span class="stress">膽小如鼠</span>? ? ? ? 第三步：設(shè)置類選器css樣式，如下：? ? ? ? .stress{color:red;}/*類前面要加入一個英文圓點*/?三、ID選擇器? ? 在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區(qū)別：? ? ? ?1、為標簽設(shè)置id="ID名稱"，而不是class="類名稱"。? ? ? ?2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。? ? 右側(cè)代碼編輯器中就是一個ID選擇符的完整實例。四、類和ID選擇器的區(qū)別? ? 學習了類選擇器和ID選擇器，我們會發(fā)現(xiàn)他們之間有很多的相似處，是不是兩者可以通用呢？我們先來總結(jié)一下他們的相同點和不同點：? ? 相同點：可以應用于任何元素? ? 不同點：? ? 1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。? ?下面代碼是正確的：? ? <p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。</p>? ?而下面代碼是錯誤的：? ?<p>三年級時，我還是一個<span id="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span id="stress">勇氣</span>來回答老師提出的問題。</p>? ?2、可以使用類選擇器詞列表方法為一個元素同時設(shè)置多個樣式。我們可以為一個元素同時設(shè)多個樣式，但只可以用類選擇器的方法實現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。? ?下面的代碼是正確的(完整代碼見右側(cè)代碼編輯器).stress{? ? color:red;}.bigsize{? ? font-size:25px;}? ? <p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節(jié)公開課...</p>? ? 上面代碼的作用是為“三年級”三個文字設(shè)置文本顏色為紅色并且字號為25px。? ? 下面的代碼是不正確的(完整代碼見右側(cè)代碼編輯器)#stressid{? ? color:red;}#bigsizeid{? ? font-size:25px;}? ?<p>到了<span id="stressid bigsizeid">三年級</span>下學期時，我們班上了一節(jié)公開課...</p>? ?上面代碼不可以實現(xiàn)為“三年級”三個文字設(shè)置文本顏色為紅色并且字號為25px的作用。五、子選擇器? ? 還有一個比較有用的選擇器子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素。如右側(cè)代碼編輯器中的代碼：? ? ? ? ? ? ? ? ? ?.food>li{border:1px solid red;}? ? 這行代碼會使class名為food下的子元素li（水果、蔬菜）加入紅色實線邊框。? ??六、包含(后代)選擇器? ? 包含選擇器，即加入空格,用于選擇指定標簽元素下的后輩元素。如右側(cè)代碼編輯器中的代碼：? ? .first ?span{color:red;}? ? 這行代碼會使第一段文字內(nèi)容中的“膽小如鼠”字體顏色變?yōu)榧t色。? ? 請注意這個選擇器與子選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。? ? 總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代。七、通用選擇器? ? 通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素，如下使用下面代碼使用html中任意標簽元素字體顏色全部設(shè)置為紅色：? ? * {color:red;}八、偽類選擇符? ? 更有趣的是偽類選擇符，為什么叫做偽類選擇符，它允許給html不存在的標簽（標簽的某種狀態(tài)）設(shè)置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態(tài)來設(shè)置字體顏色：? ? a:hover{color:red;}? ? 上面一行代碼就是為a標簽鼠標滑過的狀態(tài)設(shè)置字體顏色變紅。這樣就會使第一段文字內(nèi)容中的“膽小如鼠”文字加入鼠標滑過字體顏色變?yōu)榧t色特效。? ? 關(guān)于偽選擇符：??? 關(guān)于偽類選擇符，到目前為止，可以兼容所有瀏鑒器的“偽類選擇符”就是a標簽上使用：hover了（其實偽類選擇符還有很多，尤其是css3中，但是因為不能兼容所有瀏鑒器，本教程只是講了這一種最常用的）。其實:hover可以放在任意的標簽上，比如說p:hover，但是它們的兼容性也是很不好的，所以現(xiàn)在比較常用的還是a:hover的組合。九、分組選擇符? ? 當你想為html中多個標簽元素設(shè)置同一個樣式時，可以使用分組選擇符（，），如下代碼為右側(cè)代碼編輯器中的h1、span標簽同時設(shè)置字體顏色為紅色：? ? h1,span{color:red;}? ? 它相當于下面兩行代碼：? ? h1{color:red;} span{color:red;}
添加回答
舉報
0/150
提交
取消