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 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...
随机推荐
- find的用法
find在Linux系统中和其它工具,如sed.awk.grep等结合起来用,非常有用. 1.列出系统中所有属于root用户的“set uid”文件 #find / -perm 4755 –uid 0 ...
- 2个问题,解决tomcat启动一闪而过和运行tomcat/bin目录下的startup.bat时报错(the CATALINA_HOME environment variable is not defined correctly)
1.除手动使用开始菜单自启动或者程序启动TOMCAT时TOMCAT一闪而过,这时候是发生了错误,这时候我们打开BIN目录下的“startup.bat”文件,编辑,在结尾添加pause命名,这样在CMD ...
- 调用phprpc的时候出现Fatal error: Cannot redeclare gzdecode()
出现这个问题的原因是:php在5.4版本后,已经自包含了gzdecode()函数,开发者自己定义的gzdecode()函数会与其冲突. 在 ....\phpRPC\compat.php文件的第72行( ...
- 【LeetCode】171. Excel Sheet Column Number
题目: Related to question Excel Sheet Column Title Given a column title as appear in an Excel sheet, r ...
- Linux常见命令(三)
今天我们来介绍第三个命令:pwd. Linux中用 pwd 命令来查看”当前工作目录“的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来 ...
- 预编译语句(Prepared Statements)介绍,以MySQL为例
背景 本文重点讲述MySQL中的预编译语句并从MySQL的Connector/J源码出发讲述其在Java语言中相关使用. 注意:文中的描述与结论基于MySQL 5.7.16以及Connect/J 5. ...
- java基础系列--Date类
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/7126930.html 1.Date类概述 Date类是从JDK1.1就开始存在的老类,其提 ...
- php7.0版本不再以类名命名构造函数
<?php class Car { var $color = "add"; function Car($color="green") { $this-&g ...
- [图形学] 习题8.12 NLN二维线段裁剪算法实现
Nicholl-Lee-Nicholl二维线段裁剪算法相对于Cohen-Sutherland和Liang-Barsky算法来说,在求交点之前进行了线段端点相对于几个区域的判断,可以确切的知道要求交点的 ...
- Chrome浏览器扩展开发系列之二:Google Chrome浏览器扩展的调试
1) 查看扩展程序的详细信息和ID 通过Chrome 浏览器的“ 工具->更多工具->扩展程序”,打开chrome://extensions页面,选中右上角的“开发者模式”,可以 ...