伪元素选择器

: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目标状态伪类,结构化选择器,多媒体选择器,清除表默认样式、属性选择器的更多相关文章

  1. (4)《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型;div与span;<a>元素的链接色;伪类

    1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...

  2. CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  3. CSS之 :before && :after的用法,伪类和伪元素的区别

    一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...

  4. E:in-range伪类选择器与E:out-of-range伪类选择器

    E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),且实际输入值在该范围内时使用的样式.E:out-of-range伪类选择器用来指定 ...

  5. 清除系统默认样式,文本样式,高级选择器(权重),边界圆角,a标签的四大伪类,背景图片

    清除系统默认样式 大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; ...

  6. css清除浏览器默认样式

    css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...

  7. CSS 高级:尺寸、分类、伪类、伪元素

    CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...

  8. 理解是最好的记忆方法 之 CSS中a链接的4个伪类为何有顺序

    在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之 ...

  9. 伪类:after的使用以及结合attr来添加属性的技巧

    本案例以实现侧边栏的效果为例来说明 直接上代码看效果: css <style type="text/css"> *{;;list-style: none;} ul{;t ...

随机推荐

  1. W3School-CSS 外边距 (margin) 实例

    CSS 外边距 (margin) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS ...

  2. 主机名链接数据库,无法生成 SSPI 上下文

    两台Server,环境一样,都使用同一域账号. 1的SQL Server可以通过Windows认证连接到2,但2通过Windows认证连接1时报如下错误: 目标主体名称不正确,无法生成 SSPI 上下 ...

  3. iOS 编译报错

    Undefined symbols for architecture i386: “_OBJC_CLASS_$_XXX”, referenced from: objc-class-ref in XXX ...

  4. jQuery中each的用法之退出循环和结束本次循环

    jQuery中each的用法之退出循环和结束本次循环 jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用conti ...

  5. PHP生成图片验证码、点击切换实例

    http://www.jb51.net/article/51506.htm 现在让我们来看下 PHP 代码 复制代码代码如下: <?php session_start();function ra ...

  6. 生成器(generator,yield),next,send

    #生成器 def generator(): for i in range(200): yield '哇哈哈%s' %i g = generator() #调用生成数函数,接受作用 ret = g.__ ...

  7. SSE图像算法优化系列三:超高速导向滤波实现过程纪要(欢迎挑战)

    自从何凯明提出导向滤波后,因为其算法的简单性和有效性,该算法得到了广泛的应用,以至于新版的matlab都将其作为标准自带的函数之一了,利用他可以解决的所有的保边滤波器的能解决的问题,比如细节增强.HD ...

  8. JSTL标签 使用总结,foreach

    最近开发一个网站,经常使用JSTL,这种语法与以前的不同,开始用着非常吃力,今天总结一下,供大家参考. 一.前言 JSTL全名为JavaServer Pages Standard Tag Librar ...

  9. jackson实体转json时 为NULL不参加序列化的汇总

    首先加入依赖 <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson ...

  10. &lt;Effective Django&gt;读书笔记

    In Django parlance, a project is the final product, and it assembles one or more applications togeth ...