css 选择器

标签：

<!--
元素选择器
选择器分组
类选择器详解
ID 选择器详解
属性选择器详解
后代选择器
子元素选择器
相邻兄弟选择器
-->
<p>元素选择器</p>
<h1>h1</h1>
<h2>h2</h2>
<p class="class">class</p>
<div class="class">div====class</div>
<p class="p1">this is web page</p>
<p class="p2">this is web page</p>
<!-- p1 p2 用空格隔开-->
<p class="p1 p2">this is web page</p>

<div id="mydiv">mydiv</div>
<p title="">hello</p>
<p>PPPPPP<strong>strong<i>IIIIIII</i></strong></p>
<h1>PPPPPPPPPPPPPPPP<strong>SSSSSSSSSSSSSS<i>IIIIIIII</i></strong></h1>
</body>

/*元素选择器*/
p{
/* color: red;*/
}
/*元素选择器分组*/
h1,h2{

font-size: 19px;
/* color: blue;*/
}
/*通配符*/
*{
color: green;
}
/*类选择器*/
.class{

color: orange;
}
/*结合元素选择器*/
div.class{

font-size: 30px;

}
/*多类选择器*/
.p1{
font-size: 50px;
}
.p2{
color: yellow;
}
.p2.p1{
margin: 20px auto;
}
/*ID 选择器*/

/*
ID 选择器 只能在文档中使用一次，而类可以多次使用
ID 选择器不能结合使用
当使用js时候 ，需要用到id；
*/

#mydiv{
color: cyan;
}
/*属性选择器*/

/*后代选择器*/
p strong i{

font-size: 33px;

}
/*以一下等同*/
/*
h1 i{
color: blue;
}
*/
/*子元素选择器只能选择一级一级 区别于后代选择器*/
h1>strong>i{
color: blue;
}

/*相邻兄弟选择器 可选择紧接在后面的元素*/

li+li{
font-size: 55px;
}

css 选择器

标签：

原文地址：http://www.cnblogs.com/xiezefeng/p/4497973.html