第7章-选择器+伪类

一.选择器
1.基础选择器

通配符选择器
标签/元素选择器
类选择器
id选择器

2.高级选择器
E,F (多元素选择器)
同时匹配所有E元素或F元素，E和F之间用逗号分隔
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元素之后的同级元素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”整个开头或’val-‘的E元素
eg：img[alt |= buy]{color:red; }

[attr1][attr2=val] 匹配所有拥有attr1属性同时具有attr2等于’val’的元素
eg：a[href][title=图片]{text-decoration:underline;}

二.伪类（可以替代js实现动态效果）
1.伪元素选择器
（1）:before

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

在某个元素加入triangle类名，就可以在元素前面添加一个三角形
（2）:after

2.a伪类选择器
:link 匹配所有未被点击的链接

:visited 匹配所有已被访问的链接（鼠标点击、释放,才访问了）

:hover 匹配鼠标悬停其上的E元素

:active 匹配鼠标已经其上按下、还没有释放的E元素

3.伪类hover
（1）改变元素自己
.box:hover{ }

（2）改变元素下面的子元素

.box:hover img{ }

（3）改变元素的毗邻元素

.box:hover +.box1{display:block;}

效果等同于JQuery的mouseon、mouseout事件，用它来实现效果更省代码。对前面的选择器更加了解可以用更多的功能实现，这里只列举出我自己验证过、实现过的。