html5第一季-13章css選擇器上_第1頁
html5第一季-13章css選擇器上_第2頁
免費預覽已結束，剩余1頁可下載查看

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

13CSS選擇器[上學習要點選擇器總基本選擇復合選擇偽元素選擇

主講教師：本課程由北風網(wǎng)和瓢城 本章主要探討HTML5中CSS選擇器，通過選擇器定位到想要設置樣式的元素。目前CSS選擇器的版本已經(jīng)升級至第三代，即CSS3選擇器。CSS3選擇器提供了、更豐一．選擇器總匯本節(jié)課主要涉及到三種選擇器：基本選擇器、復合選擇器和偽元素選擇器，具體如下：名說CSS版*通用選擇選擇所有元2元素選擇選擇指定類型1id選擇指定id屬性1class選擇指定class屬性的元1[attr]系屬性選擇選擇指定attr屬性的元2~分組選擇選擇多個選擇器的元1s1后代選擇選擇指定選擇器的后代元1s1>子選擇選擇指定選擇器的子2s1+相鄰兄弟選擇選擇指定選擇器相鄰的元2s1~普通兄弟選擇選擇指定選擇器后面的元3::first-偽元素選擇選擇塊級元素文本的1::first-偽元素選擇選擇塊級元素文本的首字1偽元素選擇選擇元前插入內2偽元素選擇選擇元后插入內2二．基本選擇器使用簡單且頻率高的一些選擇器歸類為基本選擇器通用選擇器*border:1pxsolid}解釋：“*”號選擇器是通用選擇器，功能是匹配所有html元素的選擇器包括<html><p>段落<b>加粗<span>無通用選擇器會將所有元素匹配并配置樣式，這是把雙刃劍，好處就是非常方便，壞處就是不常用。元素選擇器pcolor:}<p>段落解釋：直接使用元素名稱作為選擇器名即可ID選擇器#abcfont-size:}<pid="abc">段落解釋：通過對元素設置全局屬性id，然后使用#id值來選擇頁面唯一元素類選擇器.abcborder:1pxsolid}解釋：通過對元素設置全局屬性class，然后使用.class值選擇頁面一個或多個元b.abcborder:1pxsolid}解釋：也可以使用“元素 值”的形式，限定某種類型的元素<spanclass="abcedf">無解釋：類選擇器還可以調用多個樣式，中間用空格隔開進行層疊屬性選擇器//所需CSS2版[href]color:}//所需CSS2版{border:1pxsolid}解釋：匹配屬性值的屬性選擇器//所需版本CSS3[href^="http"color:}解釋：屬性值開頭匹配的屬性選擇器//所需版本CSS3[href$=".com"color:}解釋：屬性值結尾匹配的屬性選擇器//所需版本CSS3[href*="baidu"color:}解釋：屬性值包含指定字符的屬性選擇器//所需版本CSS2[class~="edf"font-size:}解釋：屬性值具有多個值時，匹配其中一個值的屬性選擇器[lang|="encolor:}解釋：屬性值具有多個值且使用“-”號連接符分割的其中一個值的屬性選擇器。比二．復合選擇器將不同的選擇器進行組合形成新的特定匹配，我們稱為復合選擇器分組選擇器p,b,i,spancolor:}ID選擇器、類選擇器、屬性選擇器混合使用。后代選擇器pbcolor:}混合使用ID選擇器、類選擇器、屬性選擇器。子選擇器ul>liborder:1pxsolid}<li>我是兒<li>我是孫子<li>我是孫子<li>我是兒子<li>我是兒子相鄰兄弟選擇器p+bcolor:}解釋：相鄰兄弟選擇器匹配和第一個元素相鄰的第二個元素普通兄弟選擇器p~bcolor:}解釋：普通兄弟選擇器匹配和第一個元素后面的所有元素三．偽元素選擇器特性上比較容易，在CSS3中為了區(qū)分，偽元素前置兩個冒號（::），偽類前置一個冒（:）::first-line塊級首行{color:}解釋：塊級元素比如<p>、<dv>等的首行文本被選定。如果想限定某種元素，可以加上前置p:firt-line。::first-letter塊級首字母{color:}解釋：塊級元素的首行字母::before文本前插入a::beforecontent點擊}解釋：在文本

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論