一.選擇器
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

.triangle:before{content:"";display:block;border:10px solid transparent;border-right:10px solid #56a9d3; }

在某個(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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。