文章目錄
-
-
-
- 屬性選擇器
- 初級僞類選擇器
-
- 1.:root 根标簽選擇器
- 2.:not 否定選擇器
- 3.:empty 空标簽選擇器
- 4.:target 目标元素選擇器
- 僞類選擇器
- 條件選擇
-
-
屬性選擇器
li[class~='last']{
color:red;
}
E[att^=“val”] {…} 選擇比對元素E, 且E元素定義了屬性att,
其屬性值以val開頭的任何字元串
E[att$=“val”]{…}選擇比對元素E, 且E元素定義了屬性att,
其屬性值以val結尾的任何字元串
E[att*=“val”]{…}選擇比對元素E, 且E元素定義了屬性att,
其屬性值任意位置出現了“val”。即屬性值包含了“val”，位置不限。
初級僞類選擇器
僞類的效果可以通過添加一個實際的類來達到。
僞元素的效果則需要通過添加一個實際的元素才能達到。
這也是為什麼他們一個稱為僞類，一個稱為僞元素的原因。
僞類用于向某些選擇器添加特殊的效果
.last:after{
content:123;
}
類名标簽 裡邊的内容後邊添加内容
1.:root 根标簽選擇器
“:root”選擇器等同于<html>元素，簡單點說：
:root{background:orange}
html{background:orange}
得到的效果等同
建議使用:root（xml等）
2.:not 否定選擇器
用法和jQuery 中的not類似，可以排除某些特定條件的元素
div:not([class=“demo”]){
background-color:red;
}
意思為除了class為demo的div以外，所有的div的背景顔色都變紅
3.:empty 空标簽選擇器
:empty{background:orange}
用來選擇沒有内容的元素、不在文檔樹中的元素，這裡的沒有内容指的是一點内容都沒有，哪怕是一個空格。
4.:target 目标元素選擇器
用來比對被location.hash 選中的元素(即錨點元素) （id标簽）
選擇器可用于選取目前活動的目标元素
僞類選擇器
li:first-child{
background:red; //指定篩選所有的li中是第一的元素
}
:first-child 第一個子元素
:last-child 最後一個子元素
:nth-child(){} 第xxx個子元素，n代表變量自然數
:nth-last-child(){} 從後往前數
以上四個選擇器均有弊端，即如果目前位置元素不是前面所修飾的元素，那麼無效
注：其父元素的第 N 個子元素，不論元素的類型。
:first-of-type 同類第一個子元素
:last-of-type 同類最後一個子元素
:nth-of-type(){} 同類第xxx個子元素，n代表變量自然數
:nth-last-of-type(){} 同類從後往前數
此種選擇器，限制了類型，即在所修飾元素的類型下選擇特定位置的元素。
:only-child 唯一子元素選擇器
選擇是獨生子的子元素，即該子元素不能有兄弟元素，它的父元素隻有他一個直接子元素。
注意：選擇的元素是獨生子子元素，而非有唯一子元素的父元素。
:only-of-type
如果要選擇第某類特定的子元素(p) 在兄弟節點中是此類元素唯一個的話 就需要用到這個屬性了
:enabled 可用的元素
:disabled 不可用的元素
在web的表單中，有些表單元素有可用（“enabled”）和不可用（“disabled”）狀态，
比如輸入框，密碼框，複選框等。在預設情況下，這些表單元素都處在可用狀态。
那麼我們可以通過僞類選擇器 enabled 進行選擇，disabled則相反
:checked
選擇框的被選中狀态
注：checkbox, radio 的一些預設狀态不可用屬性進行改變，如邊框顔色。
:read-only 選中隻讀的元素
eg:<input type=“text” readonly=“readonly”/>
:read-write 選中非隻讀的元素
eg:<input type=“text”/>
條件選擇
E > F an F element child of an E element
直接子元素
E + F an F element immediately preceded by an E element
後面的緊挨着的兄弟節點
E ~ F an F element preceded by an E element
後面的兄弟節點
![HTML5Canvas 酷炫效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)