2素材源碼參賽作品selector_第1頁
2素材源碼參賽作品selector_第2頁
2素材源碼參賽作品selector_第3頁
2素材源碼參賽作品selector_第4頁
2素材源碼參賽作品selector_第5頁
已閱讀5頁,還剩10頁未讀, 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

*{

margin:0;

padding:0;

}星狀選擇符會在頁面上的每一個元素上起作用。web設計者經(jīng)常用它將頁面中所有元素的margin和padding設置為0。*選擇符也可以在子選擇器中使用。#container*{

border:1pxsolidblack;

}上面的代碼中會應用于id為container元素的所有子元素中。除非必要,不建議在頁面中過多的使用星狀選擇符,因為他的作用域太大,相當耗瀏覽器資源。兼容瀏覽器:IE6+、Firefox、Chrome、Safari、Opera通用選擇器標簽選擇器標簽(html)選擇器:整體控制a{color:red;}

ul{margin-left:0;}使用標簽選擇器作用于作用域范圍內的所有對應標簽。優(yōu)先級僅僅比*(通用選擇器)高。標簽選擇器與網(wǎng)頁元素同名兼容瀏覽器:IE6+、Firefox、Chrome、Safari、Operaeg:lable.html類選擇器類選擇器:精確控制.error{

color:red;

}這是一個class(類)選擇器。class選擇器與id選擇器的不同是class選擇器能作用于期望樣式化的一組元素。類選擇器命名規(guī)則:·所有類選擇器的名稱必須以一個圓點開頭?!ss只允許在類名稱中使用字母、數(shù)字、連字號(-)和下劃線(_)?!ぴ趫A點之后,名稱始終必須以字母開頭?!ゎ惷Q區(qū)分大小寫兼容瀏覽器:IE6+、Firefox、Chrome、Safari、Operaeg:class.htmlid選擇器id選擇器設定特殊元素的樣式#container{

width:960px;

margin:auto;

}井號作用域有相應id的元素。id是我們最常用的css選擇器之一。id選擇器的優(yōu)勢是精準,高優(yōu)先級(優(yōu)先級基數(shù)為100,遠高于class的10),作為javascript腳本鉤子的不二選擇,同樣缺點也很明顯優(yōu)先級過高,重用性差,所以在使用id選擇器前,我們最好問下自己,真的到了非用id選擇器的地步?用類選擇器還是用ID選擇器,應遵循以下規(guī)則。?要在一張網(wǎng)頁上多次使用某一種樣式時,必須使用類選擇器。?用ID選擇器來識別每張網(wǎng)頁上只出現(xiàn)一次的部分。?考慮用ID選擇器來避免樣式?jīng)_突,因為Web瀏覽器給了ID選擇器高于類選擇器的優(yōu)先權。兼容瀏覽器:IE6+、Firefox、Chrome、Safari、Operaeg:id.html屬性選擇器屬性選擇器(Attributeselector)讓我們可以基于屬性來定位一個元素。你可以只指定該元素的某個屬性,這樣所有使用該屬性——而不管它的值——的這個元素都將被定位,也可以更加明確并定位在這些屬性上使用特定值的元素——這就是屬性選擇器展示它們的威力的地方。有6個不同類型的屬性選擇器:

[att=value]該屬性有指定的確切的值。

[att~=value]該屬性的值必須是一系列用空格隔開的多個值,(比如,class=”titlefeaturedhome”),而且這些值中的一個必須是指定的值”value”。

[att|=value]屬性的值就是“value”或者以“value”開始并立即跟上一個“-”字符,也就是“value-”。(比如lang=”zh-cn”)

[att^=value]該屬性的值以指定值開始。

[att$=value]該屬性的值包含指定的值(而無論其位置)。

[att*=value]該屬性的值以指定的值結束。屬性選擇器屬性選擇器的另一個很有用的用處是定位不同類型的input元素。我們來看一個例子,如果你想讓文本輸入框使用一個特定的寬度,你可以使用下面的屬性選擇器:input[type="text"]{width:200px;}它將匹配所有type屬性值等于“text”的input元素。屬性選擇器屬性選擇器又比如,我們想為網(wǎng)站上不同的文件類型的鏈接添加不同的圖標,這樣訪客就會知道他們將獲得一個圖片、或者PDF文件、或者是一個word文檔等。這就可以使用屬性選擇器來實現(xiàn):a[href*=".jpg"]{background:url(jpeg.gif)no-repeatleft50%;padding:2px02px20px;}a[href*=".pdf"]{background:url(pdf.gif)no-repeatleft50%;padding:2px02px20px;}a[href*=".doc"]{background:url(word.gif)no-repeatleft50%;padding:2px02px20px;}在此例中,我們使用了一個定位所有的鏈接(a)的href屬性分別以.jpg,.pdf或.doc結束(*)的屬性選擇器。偽選擇器.復合選擇器相鄰選擇器子選擇器派生選擇器html族譜htmlbodyheadph1titlestrongHTML由嵌套標簽組成:甚至又在更多的標簽里面。這些標簽之間的關系(及它們之間如何相互嵌套)就形成了一個族譜。祖先標簽派生標簽父標簽子標簽同胞標簽派生選擇器派生(后代)選擇器XY{}lia{

text-decoration:none;

}用于選取X元素下子元素Y。注意:這種方式的選擇器將選取其下所有匹配的子元素,無視層級,所以有的情況是不宜使用的。使用此后代選擇器的時候要考慮是否希望某樣式對所有子孫元素都起作用。這種后代選擇器還有個作用,就是創(chuàng)建類似命名空間的作用。比如上述代碼樣式的作用域明顯為li。兼容瀏覽器:IE6+、Firefox、Chrome、Safari、Operaeg:derivedselector子選擇器X>Y#container>ul{

border:1pxsolidblack;

}<divid="container">

<ul>

<li>ListItem

<ul><li>Child</li>

</ul>

</li>

<li>ListItem</li>

<li>ListItem</li>

<li>ListItem</li>

</ul>

</div>與后代選擇器XY不同的是,子選擇器只對X下的直接子級Y起作用。在上面的css和html例子中,div#container>ul僅對container中最近一級的ul起作用。從理論上來講X>Y是值得提倡選擇器。兼容瀏覽器:IE7+、Firefox、Chrome、Safari、OperaX+Yul+p{

color:red;

}

相鄰同胞選擇器

上述代碼中會匹配在ul后面的第一個p,將段落內的文字顏色設置為紅色。(只匹配第一個元素)兼容瀏覽器:IE7+、

溫馨提示

  • 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

提交評論