CSS3状态伪类选择器及兄弟元素选择器

今天来学习CSS3的另一大类伪类选择器——状态伪类选择器。“状态伪类”顾名思义,选择的是一种状态,对元素某一状态定义样式,即该元素只在某种状态下才使用指定样式;默认状态下(或非某种状态下)是不采用指定样式的。
1、:hover选择器、:active选择器和:focus选择器
:hover选择器:表示选择当鼠标悬停在某元素上的这种状态时指定样式;
:active选择器:表示选择当某元素处于激活状态(鼠标在该元素上按下还没有松开)的这种状态时指定样式。
以上两个选择器在超链接中经常用到,很容易理解,所以我们可带着同样的理解方式来看下面其它状态伪类选择器。
:focus选择器:表示选择当元素获得光标焦点这种状态时指定样式,主要用于指定文本框输入文字时的样式。(示例附后)
2、:enabled选择器和:disabled选择器
:enabled选择器:表示选择当某元素处于可用状态时指定样式;
:disabled选择器:表示选择当某元素处于不可用状态时指定样式。
这俩选择器通常用于form元素,因为form元素有可用和不可用状态,以往为他们定义样式时,我们分别为它们定义不同的class,然后通过JS对其元素设置可用状态的同时指定不同的class来实现。然而有了CSS3就没必要这么麻烦了,JS只需要指定可用状态,样式会自己选择,JS代码也非常精简,易用多了。(示例附后)
3、:read-only选择器和:read-write选择器
:read-only选择器:表示选择当某元素处于只读状态时指定样式;
:read-write选择器:表示选择当某元素处于非只读状态时指定样式。
这俩选择器除了具体状态和功能不同外,用法与前面两个是一样的,就不贴示例了。
4、:default选择器、:checked选择器和:indeterminate选择器
这三个选择器是针对复选框和单选框来使用的,目前只有Opera浏览器支持最好!
:default选择器:表示选择当前元素处于非选取状态时的单选框或复选框指定样式;
:checked选择器:表示选择当前元素处于选取状态时的单选框或复选框指定样式;
:indeterminate选择器:表示选择当页面打开时,某组中的单选框或复选框元素还没有选取状态时指定样式。(示例附后)
5、::selection选择器
此选择器使用了两个“:”不是笔误,这是它的标准写法哦。主要是用来选择某元素处于选中状态时指定样式。还有就是你可能会一下想到下拉列表select,不过这里不是下拉列表,就是一个选中状态选择器。(示例附后)
小结:Ok,CSS伪类选择器,就告一段落了。那基本上所有选择器都学习完了,不过最后在此还给大家介绍一个通用兄弟选择器,以此来结束我们的选择器学习吧。
Element ~ 兄弟元素选择器——表示选择位于同一个父级元素下的某元素之后的所有其他某个种类的兄弟元素来指定样式。(示例附后)
下面贴上此节所备示例代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3状态伪类选择器——CCJK本地化官方博客</title>
<style>
* {margin:0; padding:0;}
body, input {font:12px/16px "微软雅黑";}
input {padding:3px;}
div {width:500px; margin:10px auto 10px; border:1px solid #eee; padding:10px;}
.title {font-size:15px; line-height:28px; border-bottom:1px solid #eee; margin-bottom:5px; color:#90C;}
/*demo1的样式--开始--*/
.demo1 input {border:0; background:#9CF; margin:10px 0;}
.demo1 input:hover {background:#39F;}
.demo1 input:active {background:#FCC;}
.demo1 #input2:focus {background:#3C9;}
/*--结束--*/
/*demo2的样式--开始--*/
.demo2 label{margin:0 30px 0 5px; line-height:24px;}
.demo2 #textBox{width:300px;}
.demo2 #textBox:enabled{border:1px #ccc solid;}
.demo2 #textBox:disabled{border:1px #999 solid;}
/*--结束--*/
/*demo3的样式--开始--*/
.demo3 label{margin:0 20px 0 5px; line-height:24px;}
.demo3 input[type=checkbox]:default{border:2px #666 solid;}
.demo3 input[type=checkbox]:checked{border:2px #3C0 solid;}
.demo3 input[type=radio]:indeterminate{border:2px #F39 solid;}
/*--结束--*/
/*demo4的样式--开始--*/
.demo4 p::selection{color:#fff; background:#f30;}/*当文字选中时,背景红色,字体颜色为白色*/
/*--结束--*/
/*demo5的样式--开始--*/
h1 {font-size:14px;}
h1 ~ p {color:#F60;}
/*--结束--*/
</style>
</head>
<body>
<div class="demo1">
<p>:hover选择器、:active选择器和:focus选择器示例:</p>
<input id="input1" value="" />
<input id="input2" value="" /><br />
大家仔细看这两个input的状态及样式变化,定义的样式相同,就是给第二个input多定义了一个:focus状态样式,但是展现效果差异还蛮大的,第二个input忽略了:active状态的样式,这是因为active触发的同时focus也触发了,所以就直接展现了:focus状态下的样式了。
</div>
<div>
<p>:enabled选择器和:disabled选择器示例:</p>
<label for="radio1"><input name="radio" checked/>可用:enabled</label>
<label for="radio2"><input name="radio"/>不可用:disabled</label>
<input value="状态:可用 | CCJK本地化官方博客"/>
<script>
window.onload = function()
{
var rd1 = document.getElementById("radio1");
var rd2 = document.getElementById("radio2");
var tb = document.getElementById("textBox");
rd1.onclick = function()
{
tb.value = "状态:可用 | CCJK本地化官方博客";
tb.disabled = false;
}
rd2.onclick = function()
{
tb.value = "状态:不可用 | CCJK本地化官方博客";
tb.disabled = true;
}
}
</script>
</div>
<div class="demo3">
<p>:default选择器、:checked选择器和:indeterminate选择器示例:</p>
<label><input checked />初始选中</label>
<label><input type="checkbox"/>初始未选</label>
<label><input type="radio"/>Man</label>
<label><input type="radio"/>Woman</label>
</div>
<div>
<p class="title">::selection选择器示例:</p>
<p>试着用鼠标选中我查看效果吧~</p>
</div>
<div>
<p>Element ~ 兄弟元素选择器示例:</p>
<p>我是h1之前的兄弟元素</p>
<h1>为何我前后的P元素样式不同?</h1>
<p>我是h1之后的兄弟元素</p>
<p>我是h1之后的兄弟元素</p>
</div>
</body>
</html>

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP