第7章-选择器+伪类
来源:互联网 发布:linux samba配置用户 编辑:程序博客网 时间:2024/06/14 17:45
一.选择器
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事件,用它来实现效果更省代码。对前面的选择器更加了解可以用更多的功能实现,这里只列举出我自己验证过、实现过的。
- 第7章-选择器+伪类
- css选择器-伪类选择器
- 第七章 选择器高级 a伪类
- CSS伪类选择器
- css3 伪类选择器
- CSS-伪类选择器
- 伪类选择器
- css3伪类选择器
- 结构性伪类选择器
- CSS3伪类选择器
- html伪类选择器
- CSS选择器&伪类
- CSS3伪类选择器
- 伪类选择器
- 伪类选择器
- CSS-伪类选择器
- CSS伪类选择器
- CSS3选择器--伪类
- 公众平台接口 win7 的环境下HTTPS方式调用的配置
- log4j 多个日志文件
- __stdcall,__cdecl,__fastcall的区别
- mybatis配置遇到的问题There is no getter for property named 'post_title' in 'class
- Tomcat启动项目,报错The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xm
- 第7章-选择器+伪类
- 使用泛型来创建我们自己的列表
- Guitar Pro 7 中文破解版-汉化破解版地址
- 三 service 面试详解
- PHP中 XBM格式 文件的操作
- MySQL数据库索引
- 迅速教你掌握Web运维技能
- Q15格式说明
- C/C++ 第三周线性表项目(2) 求集合并集