您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
css3的UI状态伪类选择器,属性选择器与伪对象选择器
发布时间：2015-06-16 10:59:53编辑：雪饮阅读（）
UI状态伪类选择器
<!DOCTYPE html>
<html>
<head>
<style>
input:disabled{background:yellow;color:green}
input:enabled{background:pink;color:red}
input:checked+span{background:red}
/*
三种状态的css样式：
禁用的、激活的、选中的（勾选的）
*/
/*以上三个选择器都是针对表单做的提升修改*/
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
<legend>disabled和enabled</legend>
<ul>
<li>
<label>
<input type="text" name="id" value="99" disabled /><span>ID</span>
</label>
</li>
<li>
<label>
<input type="text" name="user" value="" />
<!--input的默认状态具有 enabled属性-->
<span>昵称</span>
</label>
</li>
<li>
<label>
<input type="text" name="pwd" value="" enabled />
<span>密码</span>
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试(单选按钮)</legend>
<ul>
<li><label><input type="radio" name="sex" value="0" /><span>蓝色</span></label></li>
<li><label><input type="radio" name="sex" value="1" /><span>红色</span></label></li>
<li><label><input type="radio" name="sex" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试(多选按钮)</legend>
<ul>
<li><label><input type="checkbox" name="like" value="0" /><span>蓝色</span></label></li>
<li><label><input type="checkbox" name="like" value="1" /><span>红色</span></label></li>
<li><label><input type="checkbox" name="like" value="2" checked /><span>黑色</span></label></li>
</ul>
</fieldset>
</form>
</body>
</html>
预览图：
属性选择器
<!doctype html>
<html>
<head>
<style>
p[id]{background:red}
p[id="green"]{background:green}
p[class~="yellow"]{background:yellow}
p[class|="a"]{background:blue}
a[href^="ftp://"]{color:yellow;text-decoration:none}
a[href$="rar"]{color:white;text-decoration:none;}
a[href$="rar"]:after{content:url(images/rar.jpg)}
a[href*="o"]{background:green}
</style>
</head>
<body>
<p id="abc">小红</p>
<p id="green">小绿毛龟</p>
<p class="fl yellow">我最喜欢雪饮个人博客了</p>
<p class="a-b">小兰兰</p>
<hr />
<!--E[att^="值"] 选中以指定值开头的属性的元素-->
<a href="ftp://www.baidu.com">雪饮个人博客</a><br />
<a href="index.php">返回首页</a><br />
<!--E[att$="值"] 选中以指定值结尾的属性的元素-->
<a href="down.rar">雪饮个人博客下载</a>
<!--E[att*="值"] 选中包含指定值字符的属性的元素-->
</body>
</html>
预览图：
伪对象选择器
<!doctype html>
<html>
<head>
<style>
p::first-line{color:red}
/*设置对象内第一行的样式*/
p::first-letter{color:green;font-size:25px}
/*设置对象内第一个字符的样式*/
a::before{content:url(qvod.jpg)}
a::after{content:url(qvod.jpg)}
span::selection{background:pink}
</style>
</head>
<body>
<p>
春晓-孟浩然<br />
春眠不觉晓，<br />
处处蚊子咬，<br />
打上敌敌畏，<br />
不至死多少。<br />
</p>
<hr />
<a href="雪饮个人博客.avi">点此下载</a>
<hr />
<span>听歌听的是腕，戴表戴的是链，王八看的是盖...</span>
</body>
</html>
预览图：
关键字词：选择器,个人博客,css3