網站首頁網站地圖google地圖百度地圖學習庫RSS在線PSPS聯盟素材下載  PS視頻教程專題 PS愛好者教程網www.479042.live PS教程自學網QQ群

CSS教程實例:學習使用復雜的CSS選擇器讓我們的代碼和樣式更加靈

時間:2019-12-04 14:39 來源:前端觀察 作者:神采飛揚 閱讀:
CSS教程實例:學習使用復雜的CSS選擇器讓我們的代碼和樣式更加靈活

CSS的優先級

在深入研究高級CSS選擇器領域之前,理解CSS優先級是如何工作的是很重要的,這樣我們就知道如何適當的使用我們的選擇器并避免浪費大量的時間來調試一些只要我們注意到優先級的話就很容易被搞定的問題

當我們寫CSS的時候我們必須注意有些選擇器在級聯(cascade)上會高于其它選擇器,我們寫在最后面的選擇器將不一定會覆蓋前面我們寫在同一個元素的樣式。

那么你如何計算指定選擇器的優先級?如果你考慮到將優先級表示為用逗號隔開的四個數字就會相當簡單,比如:1, 1, 1, 1 或0, 2, 0, 1

  1. 第一個數字(a)通常就是0,除非在標簽上使用style屬性;
  2. 第二個數字(b)是該選擇器上的id的數量的總和;
  3. 第三個數字(c)是用在該選擇器上的其它屬性選擇器和偽類的總和。這里包括class (.example) 和屬性選擇器(比如 li[id=red]);
  4. 第四個數字(d)計算元素(就像table、p、div等等)和偽元素(就像:first-line等);
  5. 通用選擇器(*)是0優先級;
  6. 如果兩個選擇器有同樣的優先級,在樣式表中后面的那個起作用。

讓我們看幾個例子,這樣或許比較容易理解些:

  • #sidebar h2 — 0, 1, 0, 1
  • h2.title — 0, 0, 1, 1
  • h2 + p — 0, 0, 0, 2
  • #sidebar p:first-line — 0, 1, 0, 2

在下面的例子中,第一個將會起作用,因為它比第二個優先級高:

  • #sidebar p#first { color: red; } — 0, 2, 0, 1
  • #sidebar p:first-line { color: blue; } — 0, 1, 0, 2

至少基本理解優先級是如何工作的是很重要的,但是一些工具比如Firebug,在我們審查指定元素的時候,按照選擇器的優先級列出所有的css選擇器對讓我們知道在指定元素上哪個選擇器是有效的是很有用的。

CSS教程實例:學習使用復雜的CSS選擇器讓我們的代碼和樣式更加靈
 

讓你非常容易的看到那個選擇器作用于一個元素上了。

1. 屬性選擇器

屬性選擇器(Attribute selector)讓你可以基于屬性來定位一個元素。你可以只指定該元素的某個屬性,這樣所有使用該屬性——而不管它的值——的這個元素都將被定位,也可以更加明確并定位在這些屬性上使用特定值的元素 —— 這就是屬性選擇器展示它們的威力的地方。

有6個不同類型的屬性選擇器:

  • [att=value]
    該屬性有指定的確切的值。
  • [att~=value]
    該屬性的值必須是一系列用空格隔開的多個值,(比如,class=”title featured home”),而且這些值中的一個必須是指定的值”value”。
  • [att|=value]
    屬性的值就是“value”或者以“value”開始并立即跟上一個“-”字符,也就是“value-”。(比如lang=”zh-cn”)
  • [att^=value]
    該屬性的值以指定值開始。
  • [att$=value]
    該屬性的值包含指定的值(而無論其位置)。
  • [att*=value]
    該屬性的值以指定的值結束

比如,如果你想要改變你的博客上的日志部分元素的背景顏色,你可以使用一個指定每一個class屬性值以“post-”開始的div的屬性選擇器:

div[class|="post"] {
	background-color: #333;
	}

該語句將匹配所有class屬性包含”post”并帶”-”字符的div元素。(注:此處英文原文有些上下文不對應,我已經更正——譯者,神飛)

屬性選擇器的另一個很有用的用處是定位不同類型的input元素。比如,如果你想讓你的文本輸入框使用一個特定的寬度,你可以使用下面的屬性選擇器:

input[type="text"] {
	width: 200px;
	}

這將匹配所有type屬性值等于“text”的input元素。

現在我們可能像為網站上不同的文件類型的鏈接添加不同的圖標,這樣你的網站的訪客就會知道他們將獲得一個圖片、或者PDF文件、或者是一個word文檔等。這就可以使用屬性選擇器來實現:

a[href*=".jpg"] {
	background: url(jpeg.gif) no-repeat left 50%;
	padding: 2px 0 2px 20px;
	}
 
a[href*=".pdf"] {
	background: url(pdf.gif) no-repeat left 50%;
	padding: 2px 0 2px 20px;
	}
 
a[href*=".doc"] {
	background: url(word.gif) no-repeat left 50%;
	padding: 2px 0 2px 20px;
	}

在此例中,我們使用了一個定位所有的鏈接(a)的href屬性分別以.jpg,.pdf或.doc結束(*)的屬性選擇器。詳細可查看前端觀察之前的一篇文章《使用CSS選擇器創建個性化鏈接樣式》

瀏覽器支持

除了Internet Explorer 6,所有的主流瀏覽器都支持屬性選擇器。這意味著,如果你在你的網站上使用了屬性選擇器,你應該確保IE6用戶將仍能獲得一個可用的網站。比如我們的第三個例子,為鏈接添加圖標可以給你的網站帶來另一個級別的可用性,但是如果這些鏈接不顯示任何圖標,該網站仍然還是可用的。

PS筆刷下載 PS濾鏡下載 PS形狀下載 PS樣式下載 PS動作下載 PS圖案下載
相關教程
伊利股票涨跌