css3 选择器:CSS3 选择器【2】

UI元素状态伪类选择器
UI元素状态伪类选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。
选择器E:hover、E:active和E:focus
E:hover选择器用来指定当鼠标指针移动到元素上时元素所使用的样式；
E:active选择器用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式；
E:focus选择器用来指定元素获得光标焦点时使用的样式，主要是在文本框控件获得焦点并进行文字输入的时候使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>E:hover, E:active and E:focus</title>
<style type="text/css">
input[type="text"]:hover {background-color: greenyellow;}
input[type="text"]:focus {background-color: skyblue;}
input[type="text"]:active {background-color: yellow;}
</style>
</head>
<body>
<form>
<label>姓名：</label><input type="text" name="name"/><br/>
<label>地址：</label><input type="text" name="addr"/>
</form>
</body>
</html>
E:enabled和E:disabled伪类选择器
E:enabled选择器用来指定当元素处于可用状态时的样式；
E:disabled选择器用来指定当元素处于不可用状态时的样式。
当一个表单中的元素经常在可用状态与不可用状态之间进行切换的时候，通常会将这两个选择器结合起来使用，使用示例如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<title>E:enabled, E:disabled</title>
<style type="text/css">
input[type="text"]:enabled {background-color: yellow;}
input[type="text"]:disabled {background-color: purple;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$("input[name=ena]").change(function(event) {
var element = event.target;
if(element.checked && element.value == "true") {
$("input[name=tx]").removeAttr("disabled");
} else {
$("input[name=tx]").attr("disabled", "disabled");
}
});
});
</script>
</head>
<body>
<form>
<fieldset>
<label><input type="radio" name="ena" value="true" checked="checked"/>可用</label>
<label><input type="radio" name="ena" value="false"/>不可用</label>
</fieldset><br/>
<input type="text" name="tx"/>
</form>
</body>
</html>
E:read-only和E:read-write伪类选择器
E:read-only选择器用来指定当元素处于只读状态时的样式；
E:read-write选择器用来指定当元素处于非只读状态时的样式。
注意：在Firefox浏览器中，需要写成“-moz-read-only”和“-moz-read-write”的形式。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<title>E:read-only, E:read-write</title> 本文链接http://www.cxybl.com/html/wyzz/CSS/20130614/38594.html

时间： 2024-10-02 03:20:56

css3 选择器:CSS3 选择器【2】

css3 选择器:CSS3 选择器【2】的相关文章

CSS3中属性选择器使用方法详解

css3 选择器:CSS选择器

CSS复合选择器:css3让我们选择元素变得越来越简单

CSS3教程(1):CSS3 Gradient(CSS3渐变)

jquery用户自定义选择器及选择器高级用法实验

jquery选择器(常用选择器说明)_jquery

CSS3伪类选择器：nth-child()用法详解

CSS3特性:CSS3 target伪类

css选择器:CSS选择器基础笔记