html 選擇器之屬性選擇器

屬性選擇器的主要作用個人的理解就是對帶有指定屬性的元素設定css樣式。

使用css3的屬性選擇器，可以指定元素的某個屬性，也可以指定某個屬性和這個屬性所對應的值。

css3的屬性選擇器主要包括下面幾種

e[attr]：只使用屬性名，但沒有確定任何屬性值；

e[attr="value"]：指定屬性名，並指定了該屬性的屬性值；

e[attr~="value"]：指定屬性名，並且具有屬性值，此屬性值是乙個詞列表，並且以空格隔開，其中詞列表中包含了乙個value詞，而且等號前面的「〜」不能不寫；

e[attr^="value"]：指定了屬性名，並且有屬性值，屬性值是以value開頭的；

e[attr$="value"]：指定了屬性名，並且有屬性值，而且屬性值是以value結束的；

e[attr*="value"]：指定了屬性名，並且有屬性值，而且屬值中包含了value；

e[attr|="value"]：指定了屬性名，並且屬性值是value或者以「value-」開頭的值（比如說zh-cn）;

1.e[attr]屬性選擇器

.head a [id]

.head 下所有帶有id屬性的a都將背景色變成黑色

.head a [id][href]

.head 下所有帶有id和href屬性的a都將背景色變成黑色

2.e[attr="value"]這個選擇器必須指定值

.head a [id=「first」]

或者寫成.head a [href="aaa.html"][id]

需要注意的是，如果class有2個共用，必須要和html中的一樣如：

href=""

class="links item"
title="open the website">7a>

.head

a[class="links item"]
;//正確

.head

a[class="links"]
;//錯誤

href=""

class="links item"
title="open the website">7a>

.head

a[class~="links"]
;//正確（只需要value值在attr中被包含即可）

;//第乙個被選中5.e[attr $="value"] 以value值結束的都將被選中

;//第乙個被選中6.e[attr *="value"] 只要包含value就可以（value甚至可以是乙個單詞的一半）

href=""

class="links item"
title="open the website">7a>

.head

a[class*="lin"]
;//正確（只需要value值在attr中被出現過即可）

a

[lang|="zh"]

href=""

class="links active item"
title="test website"
target="_blank"
lang="zh">2a>
href="sites/file/test.html"
class="links item"
title="this is a link"
lang="zh-cn">3a>
href="sites/file/test.png"
class="links item"
target="_balnk"
lang="zh-tw">4a>
2,3,4都將被選中

CSS選擇器之屬性選擇器 關係選擇器

e代表標籤名，如p,div等等 att表示該標籤定義了的乙個屬性名，如class id等，value為該屬性的屬性值，該屬性值為包含字首 value的子字串。若去掉e,則表示匹配滿足條件的任意元素 基本原理同上，不過value表示該屬性值應包含以value為字尾的子字串 基本原理同上，但value表...

html 選擇器之基礎選擇器

我把css選擇器分開成三部分，第一部分是我們常用的部分，我把他叫做基本選擇器 第二部分我把他稱作是屬性選擇器，第三部分我把他稱作偽類選擇器 一 基礎選擇器 1.萬用字元 選中所有的元素 2.元素選擇器 e 乙個元素作為乙個選擇器，div，ul，dd，span等等 3 類選擇器 class 定義cla...

CSS選擇器 屬性選擇器

最近重新學習了css3，發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...