選擇器 1.核心選擇器 標簽選擇器 div{} id選擇器 one{} class選擇器 .second 逗號選擇器 div, id name{} 組合選擇器 div one{} 普通選擇器 一般不適用 (寬度加給父元素,高度加給子元素) 2.層次選擇器 子元素選擇器 .nav ul li {} 後 ...
選擇器
1.核心選擇器
標簽選擇器
div{}
id選擇器
#one{}
class選擇器
.second
逗號選擇器
div,#id-name{}
組合選擇器
div#one{}
普通選擇器
* 一般不適用
(寬度加給父元素,高度加給子元素)
2.層次選擇器
子元素選擇器
.nav>ul>li>{}
後代選擇器
.nav li{}
下一個兄弟選擇器
products> li.ios~*{}
之後所有兄弟選擇器
.products > li.ios ~ *{}
3.屬性選擇器
與狀態相關
selector[]
input[type=text]
input[type^=t] 以t開頭
input[type$=t] 以t結尾
input[type*=t] 包含t的
與子元素相關
4.偽類選擇器
:link a標簽還未被訪問
:hover 游標懸浮到元素上
:active a標簽激活
:visited a標簽訪問過
:first-child 子元素的第一個
:last-child 子元素的最後一個
:nth-child(v) 子元素中指定一個,隔行變色
v 為數字,公式,關鍵字
:first-of-type
:last-of-type
:nth-of-type(v)
v 為數字,公式,關鍵字
5.偽元素
::after
::before
副作用:在dom節點中產生一個新節點
position:relative
position:absolute