標籤:es2017 這一 特殊 包含 title 分享 超連結 input 連結
1、特殊選取器、
*用於匹配任何標籤
>用於指定父子節點的關係
<style>#d1>p{color:#F00;}</style>
<div id="d1"><p>測試測試測試</p></div>
E+F毗鄰選取器,匹配E緊隨E元素之後的同級元素F
E~F匹配E之後的同級元素F
2、a[title]{ }表示為設定了title屬性的a元素設定樣式
a[title=“”]{ }表示為設定了title屬性的 的a元素設定樣式
a[href^=]找到 以...開頭的
a[href$=]找到 以...結尾的
a[href*=]找內容裡包含什麼的
3、偽類
<style>i:first-child{color:#F00;}</style>
<p><i>第一個</i><i>第二個</i></p>
<style>input:focus{color:#F00;}</style>
<input type="text"value="你好" />
沒有擷取焦點的時候效果
擷取焦點之後
disable="disable"被禁用的屬性
:disable{ }為所以被禁用的元素設定樣式
添加樣式之前
代碼:
<style>input:focus{color:#F00;}</style>
<input type="text"value="你好" disabled="disabled"/>
<input type="text"value="你好" disabled="disabled"/>
添加樣式之後
<style>input:focus{color:#F00;} :disabled{color:#F00;}</style>
<input type="text"value="你好" disabled="disabled"/>
<input type="text"value="你好" disabled="disabled"/>
4、虛擬元素
p:nth-child(2)表示這個元素是它的父標籤的第2個元素,並且是p標籤
p:nth-of-type(2)父元素的第二個p元素
p:nth-last-of-type(2)父元素的倒數第二個p元素
4、連結
a:link超連結沒有點之前的樣式
a:hover滑鼠放到超連結上的樣式
a:active滑鼠點擊超連結那一刻的樣式
a:visite超市連結點擊之後的樣式
必須要按照這個順序來寫,這些也同樣對div有用
這一節詳情見:http://www.cnblogs.com/ruanmou/p/4832214.html
css第四課時