html伪类选择器入门,王老师html零基础学习笔记第7课——-高级选择器+伪类

摘要：

选择器高级+a伪类*   通配符(通用元素选择器)              匹配任何元素              eg :*{margin:0;padding:0;}tagName(标签|元素选择器)匹配所有标签名是tagName的元素       eg:div{ width:100p

选择器高级+a伪类

*   通配符(通用元素选择器)

匹配任何元素              eg :*{margin:0;padding:0;}

tagName(标签|元素选择器)

匹配所有标签名是tagName的元素       eg:div{ width:100px;height:40px;}

.className(class选择器)

匹配 所有class属性中包含className的元素   eg: .box{background:red;}

#IDName(id选择器)

匹配所有id属性等于IDName的元素    eg:#wrap{margin:20px;}

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;}

[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;}

a伪类选择器

:link 匹配所有未被点击的链接

eg: a:link{color:green;}

:visited 匹配所有已被点击的链接

eg: a:visited{ color:red;}

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

eg: a:hover{ text-decoration:underline;}

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

eg: a:active{ color:purple}  放手就没有了

伪类拓展( hover的使用)

.box:hover{ }这是改变元素自己

.box:hover img{ }这是改变元素下面的img子元素

a伪元素选择器

:before在E元素内容前面插入内容

eg: div:before{content:””}

:after在E元素内容后面插入内容