前言：
目前你们对“css3实例”大致比较注重，朋友们都需要学习一些“css3实例”的相关资讯。那么小编也在网上收集了一些有关“css3实例””的相关资讯，希望朋友们能喜欢，看官们快快来学习一下吧！css既是层叠样式表，通过它可以装饰html网页，使其变漂亮，而怎么变呢？就要通过css选择器了，选择html标签再设置其属性及其属性值就OK啦
一 单一选择器
1、标签选择器（元素选择器）：标签{}
CSS:<style>P{color：red} <style>
HTML:<P>测试</P>
2、ID选择器：#{}
CSS:<style>#{color：red} <style>
HTML:<P id=“P1”>测试</P>
注意：id表示标签的name,故只能唯一，且命令规则为：数字、字母、下划线
3、类选择器（class）：人以群发，物以类聚，将一类标签设为同一个样式，很实用
CSS:<style>.P2{color：red} <style>
HTML:<P class=“P2”>测试</P>
<a class=“P2” href="#">ceshi</a>
4、 通配符选择器（*）
CSS:<style>*{color：red} <style>
所有标签均受影响，不建议用。
二 组合选择器
1 、后代选择器（任意后代,空格）
CSS：.dingbu p{color:red}(div的后代所有p)
HTML: <div class="dingbu">
<ul>
<li><a href="#">测试</a></li>
</ul>
<p> 测试1</p>
</div>
2、交集选择器（并列写且没空格）
CSS: h3.sp {color:red;}
html: <h3 class="sp">交集选择1</h3>
<h3 >交集选择2</h3>
<a class="sp">我没被选择</a>
实例--只有是标签h3且class为sp 样式才会改变
3、并集选择器（分组选择器，“，”）
CSS：h3,a {color:red;}
HTML:<ul>
<li><a href="#">测试</a></li>
<li><a href="#">测试</a></li>
<li><a href="#">测试</a></li>
</ul>
<h3 class="sp">交集选择1</h3>
<h3 >交集选择2</h3>
实例：
css3选择器
4、儿子选择器（一个直系后代选择器，“>”）
CSS:div>p{background:yaqua}
HTML:<!--正确-->
<div>
<p>nihao</p>
</div>
<!--错误-->
<div>
<ul>
<li><p>nihao</p></li>
<li>hahahahahha</li>
</ul>
</div>
实例：
5、序选择器（按顺序选择，“：”）
CSS: ul li:first-child {color:yellow;}
ul li:last-child {color:red;}
HTML:<ul>
<li>ceshihah</li>
<li>测试</li>
<li>测试2</li>
</ul>
实例：
6、下一个兄弟选择器（同级，“+”）
CSS: h1+p{color:red;}
html:<h3>交集选择1</h3>
<p >交集选择2</p>
<p >交集选择3</p>
<h3 >交集选择1</h3>
<p>交集选择2</p>
<p>交集选择3</p>
<h3 >交集选择1</h3>
<p>交集选择2</p>
<p>交集选择3</p>
<h3 >交集选择1</h3>
<p>交集选择2</p>
<p>交集选择3</p>
注：只有下一个兄弟背景变红，次下一个没有变红
实例：
三 总结
总结不易请点个小♥
标签： #css3实例
