css3新增選擇器的一些練習。
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>