CSS选择器之伪类选择器(交互)
: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选择器之伪类选择器(交互)的更多相关文章
- CSS选择器之伪类选择器(元素)
:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...
- CSS选择器之伪类选择器(伪元素)
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
- CSS属性、伪类选择器,CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
- CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法
一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> ...
- CSS选择符-----伪类选择符
Element:hover E:hover { sRules } 设置元素在其鼠标悬停时的样式 <!DOCTYPE html> <html> <head> < ...
- CSS新增的伪类选择器
:root 选择文档的根元素,等同于 html 元素 :empty 选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 ...
- css 中的伪类选择器before 与after
.cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
随机推荐
- mapreduce程序的按照key值从大到小降序排列
在近期的Hadoop的学习中,在学习mapreduce时遇到问题:让求所给数据的top10,们我们指导mapreduce中是有默认的排列机制的,是按照key的升序从大到小排列的 然而top10问题的求 ...
- jQuery 阻止冒泡和默认事件
jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...
- liunx相关指令
修改网卡命名规范 a 如何进入到救援模式 修改网卡 1.修改配置文件名称 /etc/sysconfig/network-scripts/ 名称为:ifcfg-xxx 2.修改配置文件内的 dev ...
- zookeeper知识点学习
单机模式配置: Zookeeper 的启动脚本在 bin 目录下,Linux 下的启动脚本是 zkServer.sh 在你执行启动脚本之前,还有几个基本的配置项需要配置一 下,Zookeeper 的配 ...
- jQuery中的100个技巧(译)
1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. <sc ...
- ubuntu16.04上Eclipse和hadoop配置
1.安装Eclipse 1>下载Eclipse 可以以多种方式下载Eclipse,下面介绍直接从eplise官网下载和从中国镜像站点下载,下载把eclipse上传到Hadoop环境中. 第一种方 ...
- pthon获取word内容之获取表单
需求:把word里面的表单内容获取 按照规则拼成字符串 转换成类似下面的样子 代码如下: from docx import Document import re def parse_docx(f): ...
- 2013-12-LINUX 常用命令
查看iptables状态: service iptables status 查询LINUX开机时间多久 1. cat /proc/uptime输出: 105040.44 105024.75 秒 2. ...
- CSS3设置Table奇数行和偶数行样式
table:.myTable tr:nth-child(even){ //偶数行 background:#fff;}.myTable tr:nth-child(odd){ //奇数行 backgrou ...
- Beta阶段——Scrum 冲刺博客第一天
一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 今日是Beta冲刺第一天,昨日没有完成的工作 今天计划完成的工作 实现对i ...