css 为元素选择器,css目标状态伪类,结构化选择器,多媒体选择器,清除表默认样式、属性选择器
伪元素选择器
:before 和 :after
添加的位置
:before --- 第一个子节点
:after --- 最后一个子节点
特点
1、默认是 inline 元素
2、必须包含 content 属性
3、content 属性的值 : 字符串或者CSS的函数(url(), attr(), counter()) 多个字符串使用 空格 连接
注意事项:
规范要求是用::, 实际开发使用: 为了支持IE低版本浏览器。
使用场景:
1、清除浮动
e:after{
content: "";
display: table;
clear: both;
}
2、页面中有重复显示的内容,且该内容无需进行DOM操作。(钱的符号等)
e:after{
content: "$";
}
3、防止父子块元素嵌套,导致的高度塌陷(外边距合并)。
e:before{
content: "";
display: block;
}
::selection -- 选中的文本内容,为其设置样式
注意:支持的CSS样式有限。
::first-letter --- 一行的首字母
::first-line ---- 首行
二、目标状态伪类
触发的条件:
点击链接元素,该链接元素href属性指向的元素(元素id == 锚链接的值)
e:target{
}
三、结构化伪类选择器
nth-child()
--- 不区分元素类型
nth-of-type()
--- 区分元素类型
参数:
number 数字 ---- 第几个位置上的元素
odd ---- 奇数位元素
even ---- 偶数位元素
an + b ---- n (0 ~ 无限大的正整数)
四、计数函数 counter(), counters(num, "分割符")
五、属性函数 attr(属性名)
六、多媒体选择器 @media
监控打印设备
@media print{
}
七、appearance 清除表单控件的默认样式
扩展: 浏览器厂商前缀
-webkit- Chrome, Safari
-moz- 火狐
-o- 欧朋
-ms- IE
使用浏览器厂商前缀的属性,
1.该属性处于试验阶段,浏览器支持不好。
2、该浏览器特有属性
八、属性选择器
e[属性名]
e[属性名=属性值]
e[属性名^=属性值]
e[属性名$=属性值]
e[属性名*=属性值]
e[属性名~=属性值]
e[属性名|=属性值]
1.只包含该属性值
2.或者改属性值以属性值-开头
css 为元素选择器,css目标状态伪类,结构化选择器,多媒体选择器,清除表默认样式、属性选择器的更多相关文章
- css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类
后代选择器 祖先元素 后代元素{ } 子元素选择器(直接子元素选择器) 父元素>子元素{ } 兄弟选择器 元素+兄弟元素(紧邻该元素之后的下一个兄弟元素) 所有兄弟元素选择器 元素~兄弟元素(该 ...
- (4)《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型;div与span;<a>元素的链接色;伪类
1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...
- CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
- CSS之 :before && :after的用法,伪类和伪元素的区别
一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...
- E:in-range伪类选择器与E:out-of-range伪类选择器
E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),且实际输入值在该范围内时使用的样式.E:out-of-range伪类选择器用来指定 ...
- 清除系统默认样式,文本样式,高级选择器(权重),边界圆角,a标签的四大伪类,背景图片
清除系统默认样式 大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; ...
- css清除浏览器默认样式
css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...
- CSS样式表及选择器相关内容(二)-伪类与伪元素选择器
伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中) 1.a标签伪类选择器,其他标签类似 eg: ...
- CSS 高级:尺寸、分类、伪类、伪元素
CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...
随机推荐
- CenOS http 安装与运行
1.yum安装http [root@localhost ~]# yum install httpd -y 2.启动http服务 [root@localhost ~]# systemctl start ...
- 整理一些提高C#编程性能的技巧
1.使用StringBuilder代替使用string 连接符 "+" 说明:String类对象是不可变的(只读),一旦创建该对象,就不能修改该对象的值. 对象String对象的重 ...
- js数组及数组应用(冒泡和二分,遍历输出)
一.定义:1)var arr=new Array(); 加数据:arr[0]=1; 2)定义同时赋值:var arr=new Array(1,2,3,4,5); 3)调用:var arr=new Ar ...
- C++将一个数组内容赋给另一个数组
有两种方式: 一.进行数组遍历,依次赋值 ] = { , , , , }; ] ={ }; ;i<sizeof(arr1)/sizeof(int);i++) arr2[i] = arr1[i] ...
- 原生javascript 制作canvas 验证码
<canvas id="></canvas> <a href="#" id="changeImg">看不清,换一张 ...
- 用JS来实现于截取中英文混合字符串方法(转载)
网站制作过程中,提示层文字超出,需要JS做字符串截取,但是呢,我们常常会烦恼文字中英文混合如何判断,因为我们知道在JS中 string.length这个值是不考虑中英文的,但是计算机对中英文的识别是 ...
- win7休眠的开启与关闭方法
从开始菜单中找到“附件→命令提示符”,右击选择“以管理员身份运行”,此时可能需要输入管理员密码或进行UAC确认,手工输入如下命令:powercfg -a,从这里可以清楚的看到,计算机是支持休眠的,只是 ...
- springboot1.5.4 配置druid1.1.0(使用druid-spring-boot-starter)
原文:https://github.com/x113773/testall/issues/11 ### Druid 最近发布了1.1.0 版本,并且提供了 [druid-spring-boot-sta ...
- 【LeetCode】284. Peeking Iterator
题目: Given an Iterator class interface with methods: next() and hasNext(), design and implement a Pee ...
- AngularJS模块
方式一: <body ng-app="myApp"> <div ng-controller="myCtrl1"> <h1>{ ...