2.8 (案例)UI元素状态伪类选择器
2017-06-07 本文已影响0人
柒月柒日晴7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3选择器--UI元素状态伪类选择器</title>
</head>
<body>
<!--1.E:hover
2.E:active
3.E:focus
4.E:enabled
5.E:disabled
6.E:read-only
7.E:read-write
8.E:checked
9.E:default
10.E:indeterminate
11.E:selection-->
<!--
link:连接平常的状态
visited:连接被访问过之后
hover:鼠标放到连接上的时候
active:连接被按下的时候
ps:原因就是后面的会盖掉前面的设置，如果你访问了（之前可能点击过），且visited在link后的话，它就会用visited的样式把link的盖掉，所以，尽可能把link放在前面。 -->
<h1>电影清单</h1>
<ul>
<li><a href="###">美人鱼</a></li>
<li><a href="###">美国队长3</a></li>
<li><a href="##">钢铁侠</a></li>
</ul>
<form action="">
<label for="name" > 姓名：<input type="text" id="name" disabled="false" /></label>
<label for="class" > 班级：<input type="text" id="class" /></label>
<label for="radio1" > 可用：<input type="radio" id="radio1" onchange ="radio_onchange()" name="radio" /></label>
<label for="radio2" > 不可用：<input type="radio" id="radio2" onchange ="radio_onchange()" name="radio" /></label>
<label for="readOnly" > 只读：<input type="text" id="readOnly" readonly /></label>
<label for="readWrite" > 可写：<input type="text" id="readWrite" read-write /></label>
<br />
<label for="aa" > 单选按钮：<input type="radio" id="aa" name="bb" /></label>
<label for="bb" > 单选按钮：<input type="radio" id="bb" name="bb" /></label>
<br />
<label for="cc" > 复选框：<input type="checkbox" checked id="cc" name="cc" /></label>
<label for="dd" > 复选框：<input type="checkbox" id="dd" name="cc" /></label>
</form>
<style>
li:after{
content:"(仅用于测试，请勿用于商业用途)";
font-size:14px;
color:red;
}
li:hover{
background: yellow;
}
/*/*
/*:active 鼠标在元素上按下 还没有松开的时候*/
/* input[type="text"]:active{
background: blue;
}
a:link{
background: orange;
}
a:visited{
background: #000;
}
a:hover{
background: yellow;
}
a:active{
background: blue;
}*/
/*:focus 获得焦点时 主要用在文本框控件获得焦点并进行文字输入的时候使用*/
input[type="text"]:focus{
background: red;
color: #fff;
}
/*:ebabled 指定当元素处于可用状态时的样式*/
input[type = "text"][id="name"]:enabled{
background:red;
}
/*:disabled 指定当元素处于不可用状态时的样式*/
input[type = "text"][id="name"]:disabled{
background:yellow;
}
/*read-only 指定当元素处于只读状态时*/
input[type = "text"][id="readOnly"]:read-only{
background:yellow;
}
input[type = "text"][id="readOnly"]:-moz-read-only{
background:yellow;
}
/*read-write 指定当元素处于非只读状态时*/
input[type = "text"][id="readWrite"]:read-write{
background:greenyellow;
}
input[type = "text"][id="readWrite"]:-moz-read-write{
background:greenyellow;
}
/*:checked 当radio或checkbox处于选中状态时*/
#aa:checked,#bb:checked{
outline: 2px solid #999;
}
#cc:checked,#dd:checked{
outline: 2px solid #000;
}
/*:default 指定当页面打开时默认处于选中状态的radio或者 checkbox*/
/*需要注意的是即使用户将元素选中状态设置为非选中状态。default指定的样式仍然有效*/
/*只有firefox支持*/
#cc:default{
outline:3px solid red;
}
/*:indeterminate 任何一个单选框都没有被选取时 */
#aa:indeterminate,#bb:indeterminate{
outline:3px solid red;
}
</style>
<script type="text/javascript">
function radio_onchange(){
var radio = document.getElementById("radio1");
var name = document.getElementById("name");
if(radio.checked){
name.disabled="";
}else{
name.value="";
name.disabled = "disabled";
}
}
// var f = function() {
// var scope = 'f0';
// (function() {
// var scope = 'f1';
// (function() {
// console.log(scope);
// })();
// })();
// };
// f();
// var scope = 'top';
// var f1 = function() {
// console.log(scope);
// };
// var f2 = function() {
// // debugger;
// var scope = 'f2';
// f1();
// };
// f2();
// function factory() {
// var name = 'laruence';
// var intro = function(){
// alert('I am ' + name);
// }
// return intro;
// }
// function app(para){
// var name = para;
// var func = factory();
// func();
// }
// app('eve');
</script>
</body>
</html>
