CSS选择符-----伪类选择符
Element:hover
E:hover { sRules } 设置元素在其鼠标悬停时的样式
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1 {
font-size: 16px;
} a,
div {
display: block;
margin-top: 10px;
padding: 10px;
border: 1px solid #ddd;
} a:hover {
display: block;
background: #ddd;
color: #f00;
} div:hover {
background: #ddd;
color: #f00;
}
</style>
</head> <body>
<h1>请将鼠标分别移动到下面2个元素上</h1>
<a href="?">我是一个a</a>
<div>我是一个div</div>
</body> </html>
Element:focus
E:focus { sRules } 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式，webkit内核浏览器会默认给:focus状态的元素加上outline的样式
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1 {
font-size: 16px;
} ul {
list-style: none;
margin: 0;
padding: 0;
} input:focus {
background: #f6f6f6;
color: #f60;
border: 1px solid #f60;
outline: none;
}
</style>
</head> <body>
<h1>请聚焦到以下输入框</h1>
<form action="#">
<ul>
<li><input value="姓名" /></li>
<li><input value="单位" /></li>
<li><input value="年龄" /></li>
<li><input value="职业" /></li>
</ul>
</form>
</body> </html>
Element:checked
E:checked { sRules } 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:checked+span {
background: #f00;
} input:checked+span:after {
content: " 我被选中了";
}
</style>
</head> <body>
<form method="post" action="#">
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
<li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
<li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
</form>
</body> </html>
Element:enabled和Element:disabled
E:enabled { sRules } 匹配用户界面上处于可用状态的元素E
E:disabled { sRules } 匹配用户界面上处于禁用状态的元素E
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li {
padding: 3px;
} input[type="text"]:enabled {
border: 1px solid #090;
background: #fff;
color: #000;
} input[type="text"]:disabled {
border: 1px solid #ccc;
background: #eee;
color: #ccc;
}
</style>
</head> <body>
<form method="post" action="#">
<fieldset>
<legend>E:enabled与E:disabled</legend>
<ul>
<li><input type="text" value="可用状态" /></li>
<li><input type="text" value="可用状态" /></li>
<li><input type="text" value="禁用状态" disabled="disabled" /></li>
<li><input type="text" value="禁用状态" disabled="disabled" /></li>
</ul>
</fieldset>
</form>
</body> </html>
CSS选择符-----伪类选择符的更多相关文章
- CSS Pseudo-Element Selectors伪对象选择符
一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的 ...
- CSS3初学篇章_2（伪类选择符）
id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以".&quo ...
- CSS :hover伪类选择定义和用法
伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...
- 说说ID选择符、类选择符和HTML标记选择符的优先级顺序
ID选择符.类选择符和HTML标记选择符三者之间的优先级顺序是:ID选择符>类选择符>HTML标记选择符,但是可以用!important提升优先权. 如: p{color:#f ...
- CSS Pseudo-classes（伪类）
CSS Pseudo-classes(伪类) CSS伪类是用来添加一些选择器的特殊效果. 一.语法 伪类的语法: selector:pseudo-class {property:value;} CSS ...
- CSS属性、伪类选择器，CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
- 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素
CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...
- #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...
随机推荐
- 20165225《Java程序设计》第五周学习总结
20165225<Java程序设计>第五周学习总结 1.视频与课本中的学习: - 第七章学习总结 内部类: 内部类的外嵌类的成员变量在内部类中仍然有效,内部类中的方法也可以调用外嵌类中的方 ...
- asp.net开发中的问题总结
1.错误摘要 HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面 原因:由于刚安装的iis没有注册对应版本的.net导致错误,在vs提供的命令行中输入aspne ...
- python面向对象的三大特性
一.继承 面向对象中的继承就是继承的类直接拥有被继承类的属性而不需要在自己的类体中重新再写一遍,其中被继承的类叫做父类.基类,继承的类叫做派生类.子类.在python3中如果不指定继承哪个类,默认就会 ...
- （4.28）for xml path 在合并拆分上的作用演示
for xml path 用于合并与拆分 1.合并 很多时候需要在SQL Server中创建逗号分隔列表.这可以使用SQL Server的DOR XML PATH功能完成.与select语句一起使用时 ...
- finecms如何调用自定义内容
我们建站的时间经常会有一些固定的元素,比如电话.地址等,这种相对比较简单的东西可以让编辑人员直接在后台就可以定义,那么finecms有没有这个功能呢?怎么定义?如何调用? finecms后台有一个自定 ...
- php程序猿面试分享
面试总结 今天去了北京著名IT公司进行PHP程序猿的面试.这是人生第一次么,怎么不紧张?我是不是有病.不是.这叫自信呵. 首先是做一些笔试题. 1.mysql数据库索引使用的数据结构?这样做的优点是? ...
- python中base64编码与解码
在python3中用base64进行编码和解码的时候特别注意: 题目要求: 准备一张.jpg图片,比如:mm.jpg,读取图片数据并通过b85encode加密之后写入到新文件mm.txt文件中,然后读 ...
- 照葫芦画瓢之爬虫豆瓣top100
import requestsimport reimport jsonfrom requests.exceptions import RequestExceptiondef get(url): ...
- vue中根据生日计算年龄
getage() { var birthdays = new Date(this.birthday.replace(/-/g, "/")); var d = new Date(); ...
- 列表 list 容器类型数据(str字符串, list列表, tuple元组, set集合, dict字典)--->元组 tuple-->字符串 str
# ### 列表 list 容器类型数据(str字符串, list列表, tuple元组, set集合, dict字典) # (1)定义一个列表 listvar = [] print(listvar, ...