CSS選擇器 屬性選擇器

最近重新學習了css3，發現選擇器還能這麼玩。。介紹一下屬性選擇器[^ $ * ~ | ]

我給咱們順著往下縷一縷（資訊量挺大）

剛開始是這樣子：

**如下：

doctype html

>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>測試網頁
title
>
<
style
>
h1[m1]
style
>
head
>
<
body
>
<
div>
<
h1 m1
>我是h1
h1>
<
h1 m1
>h1當然是我辣
h1>
<
h1>我是h1哦
h1>
div>
body
>
html
>

然後繼續，可以玩出很多花樣（給屬性賦值以後，可以在樣式中新增值，與之對應的才能被選擇），看下圖：

然後，多重選擇，必須要都有，看下圖：

還有，當用了^符號，選擇的是，必須要以hd開頭的，後面是什麼不管，看下圖：

$符號是以誰結束的，前面是什麼不管，看下圖：

*，只要屬性內容中有，那麼就會被選擇，看下圖：

~ ，只有 有單獨的詞的時候，才會被選中，看下圖：

| ，是以內容開始，和 中劃線連線的，會被選中，如下圖：

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

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

css選擇器 偽類選擇器 屬性選擇器

偽類選擇器 nth of type index index 同型別兄弟元素中的排名 屬性選擇器 attr val attr 屬件名稱 val 屬性值 屬性選擇器 href val 表標屬性的結尾 屬性選擇器 class tap 表示屬的開頭 first child選擇第乙個 元素 nth of ty...

CSS3選擇器 屬性選擇器

指定屬性名，但沒有確定任何屬性值 type text css div div title style div1div title name div2div title age div3div body 指定屬性名，並指定了該屬性的屬性值 其他 與上述相同 div title name 指定屬性名，具...