第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定

css樣式和類選擇器的應(yīng)用區(qū)別是什么

用上一章的css樣式也可以實(shí)現(xiàn)任務(wù),為什么要用類選擇器呢?兩者有什么區(qū)別呢?求解

正在回答

3 回答

CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成:選擇器,以及一條或多條聲明。
選擇器包括單獨(dú)的選擇和分組選擇。

如:h1 { color:red;} ? 單獨(dú)選擇器 ?定義h1標(biāo)簽的文字顏色
? ? ? ?h1, h2, h3, h4 {color:red;} 分組選擇器 ?定義一組標(biāo)簽的文字顏色

依據(jù)選擇方式的不同,選擇器可以分為以下幾個(gè)類別:
? ?1. ? ?id 選擇器??梢詾闃?biāo)有特定 id 的 HTML 元素指定特定的樣式,以 "#" 來定義。
? ? ? ?如:#div1 ?{color:red;} ? ?定義id名為div1 的元素的文字顏色
? ? ? ?HTML代碼:<div id="red">這個(gè)div里面所有文字都是紅色得。</div>

? ?2. ? ?類選擇器。可以為標(biāo)有class屬性的 HTML 元素指定特定的樣式,以"." 來定義。
? ? ? ?如: ? ?.center {text-align: center}

? ? ? ? HTML代碼:<h1 class="center">這是大標(biāo)題</h1>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<p class="center">這是文字內(nèi)容</p>

? ? ? ?這兩個(gè)標(biāo)簽元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規(guī)則。
? ?3. ? ?屬性選擇器。 對帶有指定屬性的 HTML 元素設(shè)置樣式。以"[ ]"來定義。
? ? ? ?如:[title] {color:red; } ? ?為帶有 title 屬性的所有元素設(shè)置樣式
? ? ? ?HTML代碼:<h2 title="Hello world">Hello world</h2>
? ? 4. ? ?派生選擇器。 ?通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式
? ? ? ?如:li strong { ? font-style: italic; ? font-weight: normal; }

? ? ? ?HTML代碼:<li><strong>CSS選擇器和我相符,所以對我起作用</strong></li>

? ? 5. ? ?元素選擇器。最常見的 CSS 選擇器,直接以標(biāo)簽名字選擇。
? ? ? ?如:html {color:black;}
? ? ? ? ? ? ? h1 {color:blue;}
? ? ? ? ? ? ? h2 {color:silver;}
? ?6. ? ?包含選擇器。選擇作為某元素后代的元素。以空格來表示
? ? ? ?如:h1 em {color:red;} ? ?選取h1 元素包含的 em 元素
? ? ? ?HTML代碼:<h1>This is a <em>important</em> heading</h1>
? ?7. ? ?子元素選擇器。只選擇某個(gè)元素的子元素
? ? ? ?如:h1 > strong {color:red;} ? ?這個(gè)規(guī)則會把第一個(gè) h1 下面的兩個(gè) strong 元素變?yōu)榧t色,但是第二個(gè) h1 中的 strong 不受影響:
HTML代碼:<h1>這是<strong>非常</strong> <strong>非常</strong> 重要的</h1>
<h1>這是<em>真的 <strong>非常</strong></em> 重要的</h1>
? ?8. ? ?相鄰兄弟選擇器。 ? 選擇緊接在另一個(gè)元素后的元素,以"+"表示
? ? ? ?如:h1 + p {margin-top:50px;}
? ? ? ?選擇緊接在 h1 元素后出現(xiàn)的段落,h1 和 p 元素?fù)碛泄餐母冈?br /> ? ?9. ? ?還有一種特殊的選擇器,偽類和偽元素選擇器。這個(gè)在網(wǎng)頁中也經(jīng)常見到。
? ? ? ?如: a:link {color: #FF0000} /* 未訪問的鏈接 */
? ? ? ? ? ? ? ?a:visited {color: #00FF00} /* 已訪問的鏈接 */
? ? ? ? ? ? ? ?a:hover {color: #FF00FF} /* 鼠標(biāo)移動(dòng)到鏈接上 */
? ? ? ? ? ? ? ?a:active {color: #0000FF} /* 選定的鏈接 */

這個(gè)一看就明白了吧,就是定義a標(biāo)簽(超鏈接)的不同狀態(tài)用不同的CSS樣式顯示。

基本就這些了,希望給你幫助。

3 回復(fù) 有任何疑惑可以回復(fù)我~
#1

大不牛愛撕雞爺

好牛逼
2017-01-06 回復(fù) 有任何疑惑可以回復(fù)我~
#2

三日月空喵

厲害了
2017-03-30 回復(fù) 有任何疑惑可以回復(fù)我~

大神,抱大腿啊

0 回復(fù) 有任何疑惑可以回復(fù)我~

好厲害

0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150
提交
取消
初識HTML(5)+CSS(3)-升級版
  • 參與學(xué)習(xí)       1228482    人
  • 解答問題       18930    個(gè)

HTML(5)+CSS(3)基礎(chǔ)教程8小時(shí)帶領(lǐng)大家步步深入學(xué)習(xí)標(biāo)簽用法和意義

進(jìn)入課程

css樣式和類選擇器的應(yīng)用區(qū)別是什么

我要回答 關(guān)注問題
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號