CSS3学习系列之选择器（三）
- E：enabled伪类选择器和E：disabled伪类选择器
E:enabled伪类选择器用来指定元素处于可用状态的样式。
E:disabled伪类选择器用来指定当元素处于不可用状态时的样式。
当一个表单中的元素经常在可用状态与不可用状态之间进行切换的时候，通常会将E:disabled伪类选择器与E:enabled伪类选择器结合使用，用E:disabled伪类选择器来设置该元素处于不可用状态时的样式，用E:enabled选择器来设置该元素处于可用状态的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E:disabled伪类选择器与E:enabled伪类选择器结合使用示例</title>
<style>
input[type="text"]:enabled {
background-color: yellow;
} input[type="text"]:disabled {
background-color: purple;
}
</style>
<script>
function radio_onchange(){
var radio=document.getElementById("radio1");
var text=document.getElementById("text1");
if(radio.checked){
text.disabled="";
}else{
text.value="";
text.disabled="disabled";
}
}
</script>
</head>
<body>
<form>
<input type="radio" id="radio1" name="radio" onchange="radio_onchange()"/>可用
<input type="radio" id="radio2" name="radio" onchange="radio_onchange()"/>不可用
<br/>
<input type="text" id="text1" disabled/>
</form>
</body>
</html>
- E:checked、E:default和E:indeterminate
E:checked伪类选择器用来指定当前表单中的radio单选框或checkbox复选框处于选取状态时的样式。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E:checked伪类选择器使用示例</title>
<style>
input[type="checkbox"]:checked {
outline: 2px solid blue;
} input[type="checkbox"]:-moz-checked {
outline:2px solid blue;
}
</style>
</head>
<body>
<form>
兴趣：<input type="checkbox"/>阅读
<input type="checkbox"/>旅游
<input type="checkbox"/>看电影
<input type="checkbox"/>上网
</form>
</body>
E:default选择器用来指定当前页面打开时默认处于选取状态的单选或复选框控件的样式。注意：即使用户将该单选框或复选框控件的选取状态设定为非选取状态，E:default选择器中指定的样式仍然有效。例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E:default选择器的使用示例</title>
<style>
input[type="checkbox"]:default {
outline: 2px solid blue;
}
</style>
</head>
<body>
<form>
兴趣：<input type="checkbox" checked/>阅读
<input type="checkbox"/>旅游
<input type="checkbox"/>看电影
<input type="checkbox"/>上网
</form>
</body>
</html>
E:infeterminate伪类选择器用来指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定，到目前为止，只有Opera浏览器对这个选择器提供支持。
- E::selection伪类选择器
E::selection伪类选择器用来指定当前元素处于选择状态时的样式。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E::selection伪类选择器使用示例</title>
<style>
p::selection{
background: red;
color: #ffffff;
}
p::-moz-selection{
background: red;
color:#ffffff;
}
input[type="text"]::selection{
background: gray;
color:#ffffff;
}
input[type="text"]::-moz-selection{
background: gray;
color: #ffffff;
}
td::selection{
background:green;
color: #ffffff;
}
td::-moz-selection{
background: green;
color:#ffffff;
}
</style>
</head>
<body>
<p>这是一段测试文字</p>
<input type="text" value="这是一段测试文字。"/>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>测试文字</td>
<td>测试文字</td>
</tr>
<tr>
<td>测试文字</td>
<td>测试文字</td>
</tr>
</table>
</body>
</html>
- 通用兄弟元素选择器
它用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式，它的使用方法如下：
<子元素>-<子元素之后的同级兄弟元素>{
//指定样式
}
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟元素选择器E-F</title>
</head>
<body>
<div style="width: 733px;border: 1px solid #666;padding:5px">
<div>
<p>p元素为div元素的子元素</p>
<p>p元素为div元素的子元素</p>
</div>
<hr/>
<p>p元素为div元素的兄弟元素</p>
<p>p元素为div元素的兄弟元素</p>
<hr/>
<p>p元素为div元素的兄弟元素</p>
<hr/>
<div>p元素为div元素的子元素</div>
<hr/>
<p>p元素为div元素的兄弟元素</p>
</div>
</body>
</html>
CSS3学习系列之选择器（三）的更多相关文章
- css3学习系列之选择器（一）
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...
- CSS3学习系列之选择器（二）
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...
- CSS3学习系列之选择器（四）
使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...
- css3学习总结1--CSS3选择器
CSS3的属性选择器主要包括以下几种: 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: 2. E[attr$="valu ...
- [CSS3] 学习笔记-CSS选择器
CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...
- CSS3学习系列之字体
给文字添加阴影 在CSS3中,可以使用text-shadow属性给页面上的文字添加阴影效果.text-shadow属性是在css2中定义的,在css2.1中删除,在css3的text模块中有恢复了,用 ...
- CSS3学习系列之盒样式（二）
text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...
- CSS3学习系列之背景相关样式（二）
在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...
- CSS3学习系列之动画
Transitions功能使用方法 在css3中,transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能,可通过transitions属性来使用t ...
随机推荐
- IDEA第三章----idea常用配置
前两章讲解了idea的git.maven.jdk.tomcat.编码等基本配置,可以让你的项目正常运行,这一章将讲解idea的一些常用设置,这些也正是idea可爱之处,大大提高了开发的效率. 第一节: ...
- Python全栈之路-Day31
1 反射 反射的精髓是通过字符串去获取对象属性的值 1.1 基于类和对象反射的属性 #!/usr/bin/env python # __Author__: "wanyongzhen" ...
- Linq 查询与普通查询的区别
普通:select * --1 from User(表名) as u --2 where u.Name like '%s%' --3 Linq : from User(表名) as u --1 whe ...
- 通过bootloader向内核传输启动参数
作者:Younger Liu,本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. Linux提供了一种通过bootloader向其传输启动参数的功能,内核开发者 ...
- 实体框架（Entity Framework）
实体框架(Entity Framework) 实体框架(Entity Framework)简介 ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对 ...
- 图零直播新闻发布会—TOLINK2.0全面上线
在网络直播时代和现代信息技术条件下,教务管理正在由传统管理方式向数字化管理模式转变.教务管理创新需要现代信息技术来实现,使得教务管理的质量和效率得到了质的飞跃.图零直播,中国IT在线直播教育引领者,在 ...
- ssh公钥认证原理及设置root外的其他用户登录ssh
1)创建其他用户 useradd [-d 登录目录] [-G ssh][用户名] 一定要将用户添加到ssh组不然无法没有权限登录ssh 2)设置ssh不允许root登录 vi /etc/ssh/ss ...
- PDO(数据访问抽象层)、pdo事务功能和预处理功能---2017-05-05
之前所学的数据访问都是用mysqli做成类来访问的,但是mysqli这个类只是针对mysql这个数据库的:那么如果访问其他类型的数据库呢? 那么这就用到了PDO(数据访问抽象层). 一.关于PDO基本 ...
- pthread的lowlevellock
pthread的lowlevellock是futex的最简单的锁应用.也是pthread其它同步原语最基本的锁.lowlevellock提供(或实现)了三种锁(方法),一是基于0或1的互斥的锁规则,二 ...
- 关于“foreach循环”中遇到的几个问题总结
1.列表页面用"foreach循环"的时候数据没有显示,此时需要检查你对象模型中属性的首字母是否大写,切记不能大写(本人在做一个项目的时候,对象模型是别人建立的,属性首字母大写了, ...