代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
/*id选择器*/
#name{
/*color: blue;*/
}
/*类选择器*/
.three{
/*color: white;
background-color: black;*/
}
/*通配选择器*/
ul *{
background-color: skyblue;
}
/*相邻选择器*/
.three +li{
/*background-color: coral;*/
}
/*兄弟选择器*/
#item2 ~ li {
/*background-color: yellow;*/
}
/*子元素选择器*/
div > p{
background-color: yellow;
}
/*子元素选择器*/
select > option{
/*color: white;*/
}
/*父子选择器s*/
ul li{
/*background-color: black;*/
color: white;
}
ul [id]{
/*color: skyblue;*/
}
[class="three"]{
color: red;
}
p[class ^="m"]{
/*color: skyblue;*/
}
li[id $="o"]{
color: red;
}
</style>
</head>
<body>
<ul>
<li id="name">1</li>
<li id="two">2</li>
<li class="three">3</li>
<li>
<select>
<option id="xing">wang</option>
<option id="ming">shuo</option>
<option>wang</option>
<option class="ming">bao</option>
<option class="three">xi</option>
</select>
</li>
<li id="item2">兄弟选择器</li>
<li>5</li>
<li>5</li>
<li>5</li>
<li><p>5</p></li>
</ul>
<div>
<p id="item1">我是第一个div里的第一个div</p>
<p class="ming">我是第一个div里的第二个div</p>
</div>
<div>
<p id="item11">我是第二个div里的第一个div</p>
<p class="mingg">我是第二个div里的第二个div</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码：
