:link

选取未访问链接

:active

选取活动链接(单击某链接,未松开鼠标时)。

:visited

选取已被访问的链接。

:target

链接指定的目标

:hover

当鼠标浮在元素上方时。

:empty

[CSS3]选择的元素里面没有任何内容(IE6-8不支持)

:not

[CSS3]排除特定的元素(IE6-8不支持)

:focus

当用户点击或触摸元素或通过键盘的“tab”键选择它时会被触发。(IE7及以下不支持)

:focus-within

表示一个元素获得焦点,或,该元素的后代元素获得焦点。(IE11及以下不支持)

:enabled

[CSS3]可以使用时

:disabled

[CSS3]不可以使用时

:read-only

[CSS3]只读时(IE和火狐不支持)

:read-write

[CSS3]可读可写时(IE和火狐不支持)

:checked

[CSS3]被勾选之后(只能在欧鹏浏览器中使用)

:default

表示一组相关元素中的默认表单元素。(IE11及以下不支持)

:indeterminate

表示状态不确定的表单元素(比如多选框,都没选时)。(兼容性也不怎么好)

:invalid

[CSS3]内容或其他有效时(IE9及以下不支持)

:valid

[CSS3]内容或其他无效时(IE9及以下不支持)

:required

[CSS3]支持这个属性,并且定义了required的(IE9及以下不支持)

:optional

支持requried属性,但是没有定义的(IE9及以下不支持)

:in-range

在范围内的(IE9及以下不支持)

:out-of-range

超出范围的(IE9及以下不支持)

1.1      链接

link、active、visited只能用于<a>标签,这个怎么用不详细展开了。有一个问题:超链接访问过后:hover样式就不出现的问题是什么?如何解决?

解决方式:解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)。

target伪类也与a标签有关,有的页面中会有锚点,这个概念这里就不展开了,比如下面的例子:

<p id="menu">

<a href="#text1">示例1</a>|

<a href="#text2">示例2</a>|

<a href="#text3">示例3</a>|

<a href="#text4">示例4</a>|

<a href="#text5">示例5</a>

</p>

<div id="text1">

<h2>示例文字1</h2>

<p>..此处省略..</p>

<p id="ndos"></p>

</div>

<div id="text2">

<h2>示例文字2</h2>

<p>..此处省略..</p>

</div>

<div id="text3">

<h2>示例文字3</h2>

<p>..此处省略..</p>

</div>

<div id="text4">

<h2>示例文字4</h2>

<p>..此处省略..</p>

</div>

<div id="text5">

<h2>示例文字5</h2>

<p>..此处省略..</p>

<p></p>

</div>

渲染的页面如下所示(加入样式div:target{ background: red; }):

点击上面的链接,会给不同的div的背景色改变为红色。

1.2      元素状态

hover、focus-within、empty、not

:hover这个用的很广泛,就不多做介绍了。

:focus-within,举例说明这个的用法,比如<div><input/></div>,div:focus-within { background:red },那么在input获得焦点之后,整个div的背景色会成为红色。这个伪类是新出来的,只有较新的浏览器才支持(具体需要查阅),但IE11和Edge都不支持,所以就不要想着用它了。

:empty很好理解,若元素内部既没有子元素,也没有文字(这里我们称之为没有内容),那么它就是empty。p:empty将会选择页面中所有没有内容的p标签。

:not()是个带参数的伪类,进去的参数可以是所有的基本选择器,基本选择器有哪些参见我的另外一篇博文。下面通过.button:not(input)这个例子来讲解原理:首先选择所有class为button为元素,然后剔除掉其中标签为input的元素。

1.3      表单

focus:

<style>

input:focus{background-color:yellow;}

</style>

<form>

First name: <input type="text" name="firstname" /><br>

Last name: <input type="text" name="lastname" />

</form>

当选择其中一个input框进行输入时,其背景色为黄色。

enabled和disabled:

<style>

input[type="text"]:enabled{background:yellow;}

input[type="text"]:disabled{background:red;}

</style>

<form action="">

First name: <input type="text" value="Mickey" /><br>

Last name: <input type="text" value="Mouse" /><br>

Country: <input type="text" disabled="disabled" value="Disneyland" /><br>

</form>

First name和Last name输入框都是enabled,背景色为黄色,而Country是disabled,背景色是红色。

read-write和read-only(兼容性很差,不推荐使用):

input:read-write{background-color: yellow;}

input:read-only{background-color: red;}

<input value="$1">

<input readonly value="$2">

$1背景色为黄色,$2背景色为红色。

CSS选择器之伪类选择器(交互)的更多相关文章

  1. CSS选择器之伪类选择器(元素)

    :first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...

  2. CSS选择器之伪类选择器(伪元素)

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

  3. CSS属性、伪类选择器,CSS3选择器

    CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...

  4. CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法

    一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> ...

  5. CSS选择符-----伪类选择符

    Element:hover E:hover { sRules }  设置元素在其鼠标悬停时的样式 <!DOCTYPE html> <html> <head> < ...

  6. CSS新增的伪类选择器

    :root 选择文档的根元素,等同于 html 元素 :empty 选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 ...

  7. css 中的伪类选择器before 与after

    .cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...

  8. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  9. js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)

    js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...

随机推荐

  1. iOS--MJRefresh的使用 上拉刷新和下拉加载

    1.一般使用MJRefresh 来实现上拉刷新和下拉加载功能 2.MJRefresh 下载地址:https://github.com/CoderMJLee/MJRefresh 3. MJRefresh ...

  2. mysql中UNION ALL用法

    MYSQL中的UNION UNION在进行表链接后会筛选掉重复的记录,所以在表链接后会对所产生的结果集进行排序运算,删除重复的记录再返回结果. 举例说明: select * from table1 u ...

  3. hive多表联合查询(GroupLens->Users,Movies,Ratings表)

    hive (UserMovieRating)> create table if not exists Users(                      > UserID int co ...

  4. 部署nexus服务

    一.安装和启动 官网下载nexus-2.12安装包,地址:https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.12.0- ...

  5. android 判断service是否正在运行

    public static boolean isServiceExisted(Context context, String className) { ActivityManager activity ...

  6. Android 开发工具类 16_NotificationActivity

    在前台运行的 Activity 可以通过Dialog.Toast 向用户发出提示信息,而后台运行的程序,如下载.收到信息等 Service 应用,则需要使用 Notification(通知)向用户发出 ...

  7. 【转】JVM(Java虚拟机)优化大全和案例实战

    原文地址:http://blog.csdn.net/kthq/article/details/8618052 堆内存设置 原理 JVM堆内存分为2块:Permanent Space 和 Heap Sp ...

  8. Error : Weblogic Maven Plugin deployment WebLogic 12c

    Error : Weblogic Maven Plugin deployment i want to use weblogic-maven-plugin in my maven project in ...

  9. fiddler工作原理和设置代理问题

    1,什么是Fiddler Fiddler是一个http协议调试代理工具,它能够记录客户端和服务器之间的所有 HTTP请求,可以针对特定的HTTP请求,分析请求数据.设置断点.调试web应用.修改请求的 ...

  10. Web 后端--PHP 与数据库的交互

    网页要处理数据,数据置于数据库之中.今天看了书,不能让知识遗忘,遂及时记下. 用 PHP  操作 MySQL ,实现数据的交换,还要多练练.... PS: 以下 mysql 字段与mysqli 字段皆 ...