基本选择器实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 基本选择器 属性选择器</title>
<style type="text/css">
ul{
border: 1px solid #999;
width: 450px;
height:60;
padding: 10px 5px;
}
ul:after{
content: '';
display: block;
clear:both;
}
li{
list-style: none;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
background-color: skyblue;
margin-right: 5px;
float:left;
}
#six{
background-color:LawnGreen;
}
.three{
background-color: LightCyan ;
color:IndianRed ;
}
/*ul li{
background-color:LightPink ;
color:Ivory ;
}*/
.three + li {
background-color:red ;
}
#seven ~ li {
background-color:Maroon ;
}
</style>
</head>
<body>
<ul>
<li id='one'>1</li>
<li id='two'>2</li>
<li class='three'>3</li>
<li id='four'>4</li>
<li class='five'>5</li>
<li id='six'>6</li>
<li id='seven'>7</li>
<li class="eight">8</li>
<li class="nine">9</li>
<li id='ten'>10</li>
</ul>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
属性选择器实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 属性选择器</title>
<style type="text/css">
ul{
border: 1px solid #999;
width: 450px;
height:60;
padding: 10px 5px;
}
ul:after{
content: '';
display: block;
clear:both;
}
li{
list-style: none;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
background-color: skyblue;
margin-right: 5px;
float:left;
}
li[class = 'three']{
background-color:Tan ;
}
li[id ^= 't']{
background-color:Teal ;
}
li[id $= 'e']{
background-color:Thistle ;
}
li[class $= 'e']{
background-color:Tomato ;
}
li[id *= 'o']{
color: white;
}
</style>
</head>
<body>
<ul>
<li id='one'>1</li>
<li id='two'>2</li>
<li class='three'>3</li>
<li id='four'>4</li>
<li class='five'>5</li>
<li id='six'>6</li>
<li id='seven'>7</li>
<li class="eight">8</li>
<li class="nine">9</li>
<li id='ten'>10</li>
</ul>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写图：
