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

原创 老王  2020-05-15 16:06:27  阅读 1199 次 评论 0 条
摘要:

选择器高级+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元素内容后面插入内容


本文地址:http://www.wangfangwen.com/post/81.html
版权声明:本文为原创文章,版权归 老王 所有,欢迎分享本文,转载请保留出处!
阿里云服务器优惠券
减肥不为美,只为走路不磨腿,付出不亚于任何人的努力,成功永远没有尽头,只有岔路口...

发表评论


表情

还没有留言,还不快点抢沙发?