Element:hover
E:hover { sRules } 设置元素在其鼠标悬停时的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1 {
font-size: 16px;
}
a,
div {
display: block;
margin-top: 10px;
padding: 10px;
border: 1px solid #ddd;
}
a:hover {
display: block;
background: #ddd;
color: #f00;
}
div:hover {
background: #ddd;
color: #f00;
}
</style>
</head>
<body>
<h1>请将鼠标分别移动到下面2个元素上</h1>
<a href="?">我是一个a</a>
<div>我是一个div</div>
</body>
</html>
Element:focus
E:focus { sRules } 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式，webkit内核浏览器会默认给:focus状态的元素加上outline的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1 {
font-size: 16px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
input:focus {
background: #f6f6f6;
color: #f60;
border: 1px solid #f60;
outline: none;
}
</style>
</head>
<body>
<h1>请聚焦到以下输入框</h1>
<form action="#">
<ul>
<li><input value="姓名" /></li>
<li><input value="单位" /></li>
<li><input value="年龄" /></li>
<li><input value="职业" /></li>
</ul>
</form>
</body>
</html>
Element:checked
E:checked { sRules } 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:checked+span {
background: #f00;
}
input:checked+span:after {
content: " 我被选中了";
}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
<li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
<li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
</form>
</body>
</html>
Element:enabled和Element:disabled
E:enabled { sRules } 匹配用户界面上处于可用状态的元素E
E:disabled { sRules } 匹配用户界面上处于禁用状态的元素E
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li {
padding: 3px;
}
input[type="text"]:enabled {
border: 1px solid #090;
background: #fff;
color: #000;
}
input[type="text"]:disabled {
border: 1px solid #ccc;
background: #eee;
color: #ccc;
}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
<legend>E:enabled与E:disabled</legend>
<ul>
<li><input type="text" value="可用状态" /></li>
<li><input type="text" value="可用状态" /></li>
<li><input type="text" value="禁用状态" disabled="disabled" /></li>
<li><input type="text" value="禁用状态" disabled="disabled" /></li>
</ul>
</fieldset>
</form>
</body>
</html>
原文地址：https://www.cnblogs.com/fengfuwanliu/p/10180622.html
时间： 2024-07-30 23:41:12