动态伪类选择器

伪类选择器：大家熟悉的：【: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. repo andrid

    http://www.cnblogs.com/bluestorm/p/4419135.html

  2. uniGUI试用笔记（十三）调用WebService

    今天尝试用uniGUI做Web服务器,调用应用服务器的WebService,遇到些问题记录下来备忘. 1.对WebService的调用同一般App程序,只是注意如果WebService的执行时间较长, ...

  3. CLR via C#深解笔记一 - CLR & C# 基础概念

    写在前言   .Net Framework并不是Win 32 API 和COM上的一个抽象层.   某种程度上,它是自己的操作系统,有自己的内存管理器,自己的安全系统,自己的文件加载器,自己的错误处理 ...

  4. 我是如何用Go语言搭建自己的博客的

    前言: 话说,已经很久没有在博客园更新博客了,之前写的关于go语言的系列学习文章<让我们一起Go>也由于种种原因一度中断.但是,正如我之前在文章中所写,可以慢慢来,但是对于Go语言的学习却 ...

  5. 【软件分析与挖掘】Multiple kernel ensemble learning for software defect prediction

    摘要: 利用软件中的历史缺陷数据来建立分类器,进行软件缺陷的检测. 多核学习(Multiple kernel learning):把历史缺陷数据映射到高维特征空间,使得数据能够更好地表达: 集成学习( ...

  6. 使用即时文件初始化提高SQL Server性能

    今天我想谈下SQL Server里的一个特别话题——即时文件初始化(Instant File Initialization).对于你的SQL Server实例,如果你启用了即时文件初始化,在特定情况下 ...

  7. 6/20 sprint3 看板和燃尽图的更新

  8. 重构第28 天 重命名bool方法(Rename boolean method)

    详解:本文中的”为布尔方法命名”是指如果一个方法带有大量的bool 参数时,可以根据bool 参数的数量,提取出若干个独立的方法来简化参数. 理解: 我们现在要说的重构并不是普通字面意义上的重构,它有 ...

  9. 重构第25天 引入契约设计(Introduce Design By Contract checks)

    理解:本文中的”引入契约式设计”是指我们应该对应该对输入和输出进行验证,以确保系统不会出现我们所想象不到的异常和得不到我们想要的结果. 详解:契约式设计规定方法应该对输入和输出进行验证,这样你便可以保 ...

  10. css 样式表

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...