css3非常强大，可以实现很多以前只能通过js实现的功能。
也简化了许多不必要的复杂代码。
简单练下一下css3的选择器：
<style type="text/css">
li{
list-style: none;
}
input:disabled{
background: yellow;
color: green;
}
input:enabled{
background: #f90;
color: blue;
}
input:checked+span{
background: red;
}
p[width]{
background: yellow;
font-size: 30px;
}
p[id="green"]{
color: red;
}
p[class~="yellow"]{
background: orange;
}
h2[class|="a"]{
font-weight: bolder;
font-family: "黑体";
background: black;
color: #fff;
}
a[href^="http://"]{
text-decoration: none;
color: red;
}
a[href$=".rar"]{
text-decoration: none;
color: #ccc909;
display: block;
}
a[href$="rar"]:after{
content: url(xx.jpg);
}
a[href*="o"]{
background: green;
}
p::first-line{
color: red;
}
p::first-letter{
font-size: 40px;
}
a:before{
content: "tianzigeg"
}
a::after{
content: "zhezhezhe" //也可以插入图片图标等
}
span::selection{
background: red;
}
</style>
</head>
<body>
<fieldset>
<legend>刘哲刘哲刘哲</legend>
<form>
<ul>
<li>
<label>
<input type="text" name="id" value="99" disabled />
<span>ID</span>
</label>
</li>
<li>
<label>
<input type="text" name="user" value="">
<span>小哲</span>
</label>
</li>
<li>
<label>
<input type="text" value="" name="tianzi">
<span>哲哲</span>
</label>
</li>
</ul>
</form>
</fieldset>
<fieldset>
<legend>喜欢你刘哲</legend>
<ul>
<li>
<label>
<input type="checkbox" name="like" value="" >
<span>刘哲</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="like" value="" checked >
<span>小哲</span>
</label>
</li>
</ul>
</fieldset>
<p width="200" id="abc">小哲小哲小哲</p>
<p id="green">哲哲哲</p>
<p class="fl yellow">喜欢你喜欢你</p>
<h2 class="a-b">小哲最好</h2>
<a href="http://www.github.com">代码改变世界</a>
<a href="www.alibaba.com">阿里巴巴</a>
<a href="down.rar">资源链接</a>
<p>
小哲<br>
小哲<br>
小哲<br>
小哲<br>
小哲<br>
</p>
<hr>
<a href="tianzi.avi">下载</a>
<span>tianzi</span>
</body>
</html>
1512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
