动态伪类选择器

伪类选择器：大家熟悉的：【: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动态伪类选择器温故的更多相关文章

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

    动态伪类选择器 伪类选择器:大家熟悉的:[: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. loj10241 取石子游戏1

    传送门 分析 我们发现如果在某个人取完之后还剩k+1个石子,则这个人必胜.所以我们可以将n个石子转化为n-k-1个,然后不断递归的转化下去.最后我们可以得到对于n个石子的胜负只与谁先取到n%(k+1) ...

  2. 100725B Banal Tickets

    传送门 题目大意 有2*n个位置,这些位置有的已经填上了数,有的还没有(用?表示),现在让你在还没有填上数的填0~9中的任意数,使得前n个数的乘积等于后n个数的乘积,问有多少种方案. 分析 首先这个题 ...

  3. springMVC：modelandview，model，controller，参数传递

    转载:http://blog.csdn.net/wm5920/article/details/8173480 1.web.xml 配置: copy   <> ></> & ...

  4. 【转】虚拟机 NAT网络设置

    我以下写的配置方法别人在网上已经发布过类似的文章.但是我觉的别人写的东西不一定是对的,必须自己亲自试验一下才行.就像有句话说的:“实践是检验真理的唯一标准”以下是我操作的步骤.希望不足的地方,读者能够 ...

  5. java java启动方式

     java启动方式 两种方案: 1.守护进程方式启动: java –jar命令: 例如:C:\eclise\work\test.jar C:\eclise\work\test.java 打开dos:输 ...

  6. ubuntu - 14.04，如何使用鼠标右键菜单在shell中打开选择项目？

    在shell中执行:“sudo apt-get install nautilus-open-terminal”,随后重新启动系统,在要打开的文件夹上面鼠标右键,会有一个菜单项目“在终端中打开”,点击后 ...

  7. 装饰器设计模式初探及Java中实际应用举例

    本篇随笔主要介绍用Java实现简单的装饰器设计模式: 先来看一下装饰器设计模式的类图:  从图中可以看到,我们可以装饰Component接口的任何实现类,而这些实现类也包括了装饰器本身,装饰器本身也可 ...

  8. gitflow工作流简介

    gitflow工作流是一种依赖于Git版本管理工具,按特定规范对项目开发.测试.上线流程进行管理的工作方式.它是一种为实现规范化管理的约定,它明确了各个分支的意义,使整个团队的分工协作更加和谐明晰. ...

  9. pytorch 0.4.1安装问题

    环境 ubuntu 16.04, anaconda3, python 2.7 将pytorch升级为0.4.1后,import torch报错 undefined symbol: _ZN4thpp10 ...

  10. js 遍历tree的一个例子（全遍历）

    全遍历 亲测真是有效. 工作中遇到的问题应该算是比较有价值的问题. <!DOCTYPE html> <html lang="en"> <head> ...