第7章-选择器+伪类
一.選擇器
1.基礎(chǔ)選擇器
通配符選擇器
標(biāo)簽/元素選擇器
類(lèi)選擇器
id選擇器
2.高級(jí)選擇器
E,F (多元素選擇器)
同時(shí)匹配所有E元素或F元素,E和F之間用逗號(hào)分隔
eg: div,p{width:100px;height:50px;}
E F(后代選擇器)
匹配所有屬于E元素后代的F元素,E和F之間用空格分隔-包含子元素和孫元素
eg:div ul li{list-style:none;}
E > F(子元素選擇器)
匹配所有E元素的直接子元素F
eg:div>p{color:maroon;}
E + F(毗鄰元素選擇器)
匹配所有緊隨E元素之后的同級(jí)元素F
eg:li+li{color:red;}
3.屬性選擇器
[attr]匹配具有attr屬性的E元素
eg:a[href]{ color:red; }
[attr=val] 匹配所有attr屬性等于“val”的E元素
eg:a[href="www.baidu.com"]
[attr~=val] 匹配所有attr屬性包含“val”或者等于“val”的E元素
eg:img[src ~= ”images”]{ margin:10px;}
[attr|=val] 匹配所有attr屬性以“val”整個(gè)開(kāi)頭或’val-‘的E元素
eg:img[alt |= buy]{color:red; }
[attr1][attr2=val] 匹配所有擁有attr1屬性同時(shí)具有attr2等于’val’的元素
eg:a[href][title=圖片]{text-decoration:underline;}
二.偽類(lèi)(可以替代js實(shí)現(xiàn)動(dòng)態(tài)效果)
1.偽元素選擇器
(1):before
在某個(gè)元素加入triangle類(lèi)名,就可以在元素前面添加一個(gè)三角形
(2):after
2.a偽類(lèi)選擇器
:link 匹配所有未被點(diǎn)擊的鏈接
:visited 匹配所有已被訪問(wèn)的鏈接(鼠標(biāo)點(diǎn)擊、釋放,才訪問(wèn)了)
:hover 匹配鼠標(biāo)懸停其上的E元素
:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒(méi)有釋放的E元素
3.偽類(lèi)hover
(1)改變?cè)刈约?
.box:hover{ }
(2)改變?cè)叵旅娴淖釉?/p> .box:hover img{ }
(3)改變?cè)氐呐徳?/p> .box:hover +.box1{display:block;}
效果等同于JQuery的mouseon、mouseout事件,用它來(lái)實(shí)現(xiàn)效果更省代碼。對(duì)前面的選擇器更加了解可以用更多的功能實(shí)現(xiàn),這里只列舉出我自己驗(yàn)證過(guò)、實(shí)現(xiàn)過(guò)的。
總結(jié)
以上是生活随笔為你收集整理的第7章-选择器+伪类的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 一张图看透微信公众号、企业号、小程序
- 下一篇: niceScroll 滚动条的用法