动态伪类选择器

伪类选择器：大家熟悉的：【:link】【:visited】【:hover】【:active】
CSS3的伪类选择器分为六种：
（1）动态伪类选择器
（2）目标伪类选择器
（3）语言伪类选择器
（4）UI伪类选择器
（5）结构伪类选择器
（6）否定伪类选择器
注：和其它CSS选择器的区别-伪类选择器都以冒号【:】开头

思考问题？
（1）CSS3伪类选择器有什么功能？
（2）选定元素能带来什么便利？

1.1.动态伪类选择器语法
动态伪类包含两种：
（1）在链接中常看到的锚点伪类
（2）为用户行为伪类

（3）锚点伪类设置遵循【爱恨原则LoVe/HAte】，即link->visited->hover->active
（4）IE6、IE7、IE8，a:link的针对性比其他3个都弱

1.2.动态伪类选择器兼容性

注：IE6浏览器仅支持链接锚点a:hover

2.1目标伪类选择器：用来匹配文档（页面）的URI中某个标识符的目标元素

<style>
div:target{background:black;color:white;}
</style>
<a href="#title1">标题1</a>
<a href="#title2">标题2</a>
<a href="#title3">标题3</a>
<div id="title1">内容1</div>
<div id="title2">内容2</div>
<div id="title3">内容3</div>

2.2目标伪类选择器语法


注：目标伪类选择器是动态选择器，只有存在URL指向该匹配元素时，样式效果才会生效

2.3目标伪类选择器浏览器兼容性


注：目标伪类选择器在IE8及之前版本不被支持，但IE用户点击目录里的链接仍将跳转到相应的标题，只是标题不会高亮显示；IE低版本需要高亮效果要动用JS

2.4目标伪类选择器引起的相关知识记忆方法：

关于三角形角标记法：（统一设置transparent）
1.上下指向，左右为transparent
2.左右指向，上下为transparent
3.方向指向哪里，哪里为transparent

transition:property duration timing-function delay;
property:相当于对应的运动员
duration:相当于目标，多长时间完成
timing-function:选择对应的跑道
delay:还要等待多久

3.1语言伪类选择器
使用语言伪类选择器来匹配使用语言的元素是非常有用的，特别是用于多语言版本的网站，起作用更是明显。可以使用它来根据不同语言版本设置页面的字体风格

3.2语言伪类选择器语法
语言伪类选择器是根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从CSS指定。
为文档指定语言，有两种方法：
1.<!DOCTYPE HTML><html lang="en-US">
2.<body lang="fr">
语言伪类选择器允许不同的语言定义特殊的规则，这在多语言版本的网站用起来是特别的方便。
E(element):lang(language)表示选择匹配E的所有元素，且匹配元素指定了lang属性，其值是language

3.3浏览器兼容性


注：对于IE6、IE7这些不兼容的浏览器，我们可以引用不一样名字的样式表

3.4实战

<body>
<style>
:lang(en){quotes:'"' '"';}
:lang(en) q{background:red;}
:lang(fr){quotes:'?' '?';}
:lang(fr) q{background:green;}
</style>
<p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future where people live in harmony with nature
</q>
we hope they succeed.
</p>

4.1UI元素状态伪类选择器
主要用于form表单元素上，以提高网页的人机交互、操作逻辑以及页面的整体美观，使表单页面更具个性与品位，而且使用户操作页面表单更便利和简单

4.2UI元素状态伪类选择器语法
UI元素状态包括：启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。
HTML元素表单文本输入框，分启用和禁用；
HTML元素表单单选按钮和多选按钮，分选中和未选中；

4.3浏览器兼容性

IE9已经可以全面支持UI元素状态伪类选择器了
至于IE6 ~ IE8，就得采用JS库来解决兼容性问题

5.1结构伪类选择器
结构伪类选择器是根据元素在文档树中的某些特性（如相对位置）定位到它们。也就是，通过文档树结构的相互关系来匹配特定的元素，从而减少HTML文档对ID或类名的定义，帮助你保持代码干净和整洁；就是通过DOM文档树才获取对应的元素

5.2结构伪类选择器语法

让你分清结构伪类选择器的神器！

5.3结构伪类选择器浏览器兼容性

5.4结构伪类选择器中的参数n
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
（1）参数n为具体的数值：可以是任何大于0的正整数
（2）参数n为表达式【n*length】：n从零开始计算，length>0的整数；为n的倍数
（3）参数n为表达式【n+length】：选择>=length的元素
（4）参数n为表达式【-n+length】：选择<=length的元素
（5）参数n为表达式【n*length+b】：b为偏移值，表示隔length个元素选中第n*length+b个元素
（6）参数n为关键词【odd】：选择奇数
（7）参数n为关键词【even】：选择偶数

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

first-child选择的一定是第一个，但是first-of-type选择的不一定是第一个

6.1否定伪类选择器
否定选择器【:not()】是CSS3的新选择器，类型jQuery中的【:not()】，用来定位不匹配该选择器的元素

6.2否定伪类选择器语法
起到过滤内容的作用

6.3浏览器兼容性

7伪元素

CSS2.1中用到的：【:first-line】【:first-letter】【:before】【:after】
CSS3对伪元素进行了调整，在之前的基础上增加了一个冒号【::first-line】【::first-letter】【::before】【::after】，还增加了【::selection】
浏览器，对这两种方法都支持

（1）伪元素::first-letter：用来选择文本块的第一个字母，eg：下沉首字母
（2）伪元素::first-line：用来选择元素的第一行文本
（3）伪元素::before和::after：不是指存在于标记中的内容，而是可以插入额外内容的位置。尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式；要为伪元素生成内容，还需要配合content属性
（4）伪元素::selection：用来匹配突出显示的文本，也就是用鼠标选中文本之后的样式【注】::selection仅接受两个属性，一个是background，另一个是color

注：对于IE6 ~ IE8仅支持单冒号

CSS动态伪类选择器温故-3的更多相关文章

  1. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  2. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  3. css的伪类选择器的使用

    伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...

  4. HTML&CSS基础-伪类选择器

    HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  5. CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

  6. 前端开发HTML&css入门——伪类选择器和一些特殊的选择器

    伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...

  7. css之伪类选择器:before :after(::before ::after)

    一.总结: ::before是在标签内容前面添加内容, ::after是在标签内容后面添加内容 ::before ::after与:before  :after的区别:css3中修订后的伪元素使用:: ...

  8. css伪类选择器详细解析及案例使用-----伪类选择器（1）

    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...

  9. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

随机推荐

  1. <转载> 优秀程序员必备的23条好习惯

    转自 优秀程序员必备的23条好习惯 编程是一项聪明人玩的游戏,它既是对智力的考验,也是对习惯的考验,智力的好坏取决于父母的基因,人们无从左右,但习惯的好坏却是可以不断培养.一项由美国芝加哥大学国家研究 ...

  2. #ifdef 和 #if defined 的区别 -- 转

    #ifdef 和 #if defined 的区别在于,后者可以组成复杂的预编译条件,比如 #if defined (AAA) && defined (BBB) xxxxxxxxx #e ...

  3. 转载 -- 如何判断Javascript对象是否存在

    http://www.ruanyifeng.com/blog/2011/05/how_to_judge_the_existence_of_a_global_object_in_javascript.h ...

  4. 另类angularjs应用

    回顾 上一篇文章主要讲解了创建兼容任意浏览器(主要是ie的一些奇葩问题)的angularjs web应用,但是项目开发中其实更重要的还是在功能的模块化.代码自动压缩上面,这样项目在后期维护或者功能的重 ...

  5. 条件注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]>

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...

  6. Eclipse项目名出现红叉

    一.背景与原因 项目第一次加进来的时候,我用的是D:\Java\jdk1.7.0_17,后来由于配置将tomcat切换到jboss,说是JBOSS某个版本只支持jdk6,我就将“环境变量JAVA_HO ...

  7. wireshark如何抓取本机包

    在进行通信开发的过程中,我们往往会把本机既作为客户端又作为服务器端来调试代码,使得本机自己和自己通信.但是wireshark此时是无法抓取到数据包的,需要通过简单的设置才可以. 具体方法如下: 方法一 ...

  8. 在ASP.NET开发中容易忽略的2个小问题

    本文地址:http://www.cnblogs.com/outtamyhead/p/3642729.html,转载需保留本地址. 最近在我的MVC项目中出现了两个非常小,但是往往惹出大麻烦的问题,借中 ...

  9. Popup 显示阴影

    WPF Popup: How to put a border around the popup? 通过设置 Border 的 margin 来为阴影留出位置,并设置 Popup: AllowsTran ...

  10. Mina、Netty、Twisted一起学（三）：TCP消息固定大小的前缀(Header)

    在上一篇博文中,有介绍到用换行符分割消息的方法.但是这种方法有个小问题,如果消息中本身就包含换行符,那将会将这条消息分割成两条,结果就不对了. 本文介绍另外一种消息分割方式,即上一篇博文中讲的第2条: ...