`
lucifinilhades
  • 浏览: 84749 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS3 选择器【2】

CSS3选择器HTML5 
阅读更多

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>
		<style type="text/css">
input[type="text"]:-moz-read-only {background-color: gray;}
input[type="text"]:-moz-read-write {background-color: greenyellow;}
input[type="text"]:read-only {background-color: gray;}
input[type="text"]:read-write {background-color: greenyellow;}
		</style>
	</head>
	<body>
		<form>
			<label>名字：</label><input type="text" name="name"/><br/>
			<label>地址：</label><input type="text" name="addr" value="江苏省常州市" readonly="readonly"/>
		</form>
	</body>
</html>

E:checked、E:default和E:indeterminate伪类选择器

  • E:checked选择器用来指定当表单中的radio或checkbox组件处于选取状态时的样式。注意：在Firefox浏览器中需要写成“-moz-checked”的形式。
  • E:default选择器用来指定当页面打开时默认处于选取状态的单选或复选框控件的样式。注意：即使用户将该组件的选取状态设定为非选取状态，该选择器中指定的样式仍然有效。
  • E:indeterminate选择器用来指定当页面打开时，如果一组单选框中任何一个单选组件都没有被设定为选取状态时，整组单选框的样式，如果用户选取其中任意一个单选组件，则该样式被取消。

E::selection伪类选择器

该选择器用来指定当元素处于先中状态时的样式。注意：在Firefox浏览器中需要写成“-moz-selection”的形式。 使用示例如下：

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8"/>
		<title>E:enabled, E:disabled</title>
		<style type="text/css">
p::selection {background: red; color: #FFF;}
p::-moz-selection {background: red; color: #FFF;}
		</style>
	</head>
	<body>
		<p>这是一段测试文字。</p>
	</body>
</html>

通用兄弟元素选择器

该选择器用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式，其使用格式如下所示：

<子元素>~<子元素之后的同级兄弟元素> {}
<子元素>+<子元素之后的同级的相邻兄弟元素> {}

这里的同级是指子元素和兄弟元素的爷元素是同一个元素。

分享到：
| CSS3 选择器【1】
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics