2023學年完整公開課版CSS頁面選擇器_第1頁
2023學年完整公開課版CSS頁面選擇器_第2頁
2023學年完整公開課版CSS頁面選擇器_第3頁
2023學年完整公開課版CSS頁面選擇器_第4頁
2023學年完整公開課版CSS頁面選擇器_第5頁
已閱讀5頁，還剩12頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

CSS3頁面元素選擇器選擇器主要是用來確定html的樹形結構中的DOM元素節點基本選擇器屬性選擇器偽類選擇器選擇器重慶科技學院信息學院通配符選擇器（＊）通配符選擇器是用來選擇所有元素*{marigin:0;padding:0;}選擇某個元素下的所有元素.demo*{border:1pxsolidblue;}元素選擇器(E)就是選擇網頁中的元素，如html,body,p,divli{background-color:grey;color:orange;}類選擇器（.className）類選擇器是以一獨立于文檔元素的方式來指定樣式，使用類選擇器之前需要在html元素上定義類名，需要保證類名在html標記中存在，這樣才能選擇類<divclass="demo">后才能使用.demo{font-weight:bold;color:yellow;}p.items{color:red;}只會匹配class屬性包含important的所有p元素類選擇器類選擇器還有可以具備多類名元素中同時有兩個或多少類名，以空格隔開，選擇器也可以使用多類連接在一起.important{font-weight:bold;}.active{color:green;background:lime;}.items{color:#fff;background:#000;}.important.items{background:#ccc;}.first.last{color:blue;}".important.items"這個選擇器只對元素中同時包含了"important"和"items"兩個類才能起作用ID選擇器（#ID）使用ID選擇器之前也需要先在html文檔中加注ID名稱，在樣式選擇器中才能找到相對應的元素不同的是ID選擇器是一個頁面中唯一的值在類使用時是在相對應的類名前加上一個“.”號（.className）ID選擇器是在名稱前使用"#"如(#id)ID選擇器#first{background:lime;color:#000;}#last{background:#000;color:lime;}一個文檔中一個ID選擇器只充許使用一次，因為ID在頁面中是唯一的ID選擇器不能像類選擇器一樣多個合并使用，一個元素只能命名一個ID名可以在不同的文檔中使用相同的ID名后代選擇器（ＥＦ）也稱作包含選擇器,作用就是可以選擇某元素的后代元素比如說:EF，前面E為祖先元素，Ｆ為后代元素，所表達的意思就是選擇了Ｅ元素的所有后代Ｆ元素，請注意他們之間需要一個空格隔開。這里Ｆ不管是E元素的子元素或者是孫元素或者是更深層次的關系，都將被選中.demoli{color:blue;}//選中div.demo中所有的li元素相鄰兄弟元素選擇器(E+F)相鄰兄弟選擇器可以選擇緊接在另一元素后的元素，而且他們具有一個相同的父元素，EF兩元素具有一個相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相鄰li+li{background:green;color:yellow;border:1pxsolid#ccc;}表示選擇li的相鄰元素li，我們這里一共有十個li，那么上面的代碼選擇了從第2個li到10個li，一共九個.active+li{background:green;color:yellow;border:1pxsolid#ccc;}選擇li.active后面相鄰的li元素，注意了和li.active后面相鄰的元素僅只有一個的。通用兄弟選擇器（Ｅ?Ｆ）選擇某元素后面的所有兄弟元素，需要在同一個父元素之中，E和F元素是屬于同一父元素之內，并且F元素在Ｅ元素之后，那么E~F選擇器將選擇中所有Ｅ元素后面的Ｆ元素active~li{background:green;color:yellow;border:1pxsolid#ccc;}//選擇中了li.active元素后面的所有兄弟元素li群組選擇器（selector1,selector2,...,selectorN）將具有相同樣式的元素分組在一起，每個選擇器之間使用逗號“，”隔開:.first,.last{background:green;color:yellow;border:1pxsolid#ccc;}因為li.first和li.last具有相同的樣式效果，所以我們把他們寫到一個組里來CSS3-選擇器屬性選擇器a[href$='.pdf'],a[href^='mailto'],a[class*=‘item’]兄弟選擇器Div~img偽類選擇器:nth-child(n),:nth-last-child(n),:last-child,:checked,:empty,:only-child,:nth-of-type(odd),:nth-of-type(even)選擇標簽

<body><p><h1>…<hn>

body{}p{}h1{}選擇標簽中的對象<headerid=“page_header”><footerid=“page_footer”><sectionid=“sidebar”>header#page_header{}footer#page_footer{}sect

溫馨提示

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

評論

0/150

提交評論