### CSS選擇器復習
通用選擇器:* 選擇到所有的元素?
選擇子元素:> 選擇到元素的直接后代(第一級子元素)?
相鄰兄弟選擇器:+ 選擇到緊隨目標元素后的第一個元素?
普通兄弟選擇器:~ 選擇到緊隨其后的所有兄弟元素?

**偽元素選擇器**:?
::first-line 匹配文本塊的首行?
::first-letter 選擇文本塊的首字母?
偽類選擇器:?
:before, :after在元素內容前面、后面添加內容(相當于行內元素)?
CSS3結構選擇器?
:nth-child 選擇指定索引處的子元素?
nth-child(n) 父元素下的第n個子元素?
nth-child(odd) 奇數子元素(同nth-child(2n-1))?
nth-child(even) 偶數子元素(同nth-child(2n))?
nth-child(an+b) 公式?
(nth-child從1開始)?
:nth-last-child(n) 倒數第n個子元素?
:nth-of-type(n) 父元素下的第n個指定類型的子元素?
:nth-last-of-type 父元素下的倒數第n個指定類型的子元素?
:first-child 選擇父元素下的第一個子元素?
:last-child 選擇父元素下的最后一個子元素?
:only-child 選擇父元素下唯一的子元素?
:only-of-type 選擇父元素下指定類型的唯一子元素?
:root 選擇文檔的根目錄,返回html?

div :only-child注意空格(選中div下唯一的子元素)?
**偽類選擇器**?
:link指向未被訪問頁面的鏈接設置樣式?
:visited設置指向已訪問頁面的鏈接的樣式?
:hover鼠標懸停時觸發?
:active在點擊時觸發?
:enabled 選擇啟用狀態元素?
:disabled 選擇禁用狀態元素?
:checked 選擇被選中的input元素(單選按鈕或復選框)?
:default 選擇默認元素?
:valid、invalid 根據輸入驗證選擇有效或無效的input元素?
:in-range、out-of-range 選擇指定范圍之內或者之外受限的元素?
:repuired、optional 根據是否允許:required屬性選擇input元素?
?
如果將link的顏色設置的與visited相同,則頁面打開時,link的樣式被visited樣式覆蓋,如上,a標簽顯示的字體顏色為綠色。?
但是如果設置為不同的屬性,可以呈現出疊加的效果。?
?

點擊a標簽時,字體的顏色為黃色。?
利用label修改radio的樣式:如下:
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="關鍵詞一,關鍵詞二">
<meta name="Description" content="網站描述內容">
<meta name="Author" content="劉艷">
<title></title>
<style>
input[type="radio"]{display: none;}
label{display: inline-block;width: 24px;height: 24px;
border-radius: 50%;border: 1px solid #ccc;margin: 5px;}
:checked + label{background: #00b3ee;}
</style>
</head>
<body>
<input type="radio" name = "fruit" id = "check1"/>
<label for="check1"></label>
<input type="radio" name = "fruit" id = "check2"/>
<label for="check2"></label>
<input type="radio" name = "fruit" id = "check3"/>
<label for="check3"></label>
<input type="radio" name = "fruit" id = "check4"/>
<label for="check4"></label>
</body>
</html>
~~~
實現的效果:?

**:default**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="關鍵詞一,關鍵詞二">
<meta name="Description" content="網站描述內容">
<meta name="Author" content="劉艷">
<title></title>
<style>
:default{background: #009FE6;}
</style>
</head>
<body>
<form>
<input type="text">
<button>按鈕</button>
<input type="submit" value="提交">
</form>
</body>
</html>
~~~
form表單中默認獲取到焦點的是Button按鈕?

屬性選擇器?
E[attr] 屬性名,不確定具體屬性值?
E[attr=”value”] 指定屬性名,并指定其對應屬性值?
E[attr ~=”value”] 指定屬性名,找到的是具有此屬性名,且與其它屬性名之間用空格隔開,如下:?
?
E[attr ^= “value”] 指定屬性名,屬性值以value開頭?
E[attr $=”value”] 指定屬性名,屬性值以value結束?
E[attr *=”value”] 指定了屬性名,屬性值中包含了value?
E[attr |= “value”] 指定屬性名,屬性值以value-開頭或者值為value?

- 前言
- jQuery輪播圖插件
- JS模擬事件操作
- JS閉包與變量
- JS綁定事件
- HTML5之file控件
- JavaScript的this詞法
- JavaScript的this詞法(二)
- JS this詞法(三)
- JS檢測瀏覽器插件
- JS拖拽組件開發
- number輸入框
- Modernizr.js和yepnode.js
- DOM變化后事件綁定失效
- div和img之間的縫隙問題
- 詳解JavaScript作用域
- bootstrap入門
- 表單驗證(登錄/注冊)
- Bootstrap網格系統
- Bootstrap排版
- Bootstrap創建表單(一)
- Bootstrap表單(二)
- Bootstrap按鈕
- Bootstrap圖片
- Bootstrap字體圖標(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜單
- Bootstrap按鈕組
- Bootstrap按鈕菜單
- Bootstrap輸入框組
- Bootstrap導航元素
- Bootstrap導航欄
- sublimeText頻頻崩潰
- JQuery不同版本的差異(checkbox)
- Bootstrap面包屑導航、分頁、標簽、徽章
- Bootstrap警告
- Bootstrap進度條
- 前端的上傳下載
- JS字符串的相關方法
- CSS3選擇器(全)
- CSS3新增文本屬性詳述
- 利用CSS3實現圖片切換特效
- CSS3新增顏色屬性
- CSS3的border-radius屬性詳解
- JS創建對象幾種不同方法詳解
- JS實現繼承的幾種方式詳述(推薦)
- CSS3響應式布局
- JS模塊化開發(requireJS)
- 利用@font-face實現個性化字體
- 前端在html頁面之間傳遞參數的方法
- CSS自動換行、強制不換行、強制斷行、超出顯示省略號
- 如何在Html中引入外部頁面
- reactJS入門
- React組件生命周期
- 使用React實現類似快遞單號查詢效果
- ReactJS組件生命周期詳述
- React 屬性和狀態詳解