标签：
CSS3中，选择器的分类很多，有元素选择器、类选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器。
1、最常见的选择器就是元素选择器，文档的元素就是最基本的选择器，例如，h1{},a{}
2、选择器分组：h1,h2{}、*{}
3、类选择器允许以一种独立于文档元素的方式来指定样式：.class{}；
可以结合元素选择器：a.class{}；
多类选择器：.class.class{}
4、ID选择器与类选择器相似，不过也有一些重要差别，例如：#id{}
ID选择器与类选择器的区别：ID只能在文档中使用一次，而类可以使用多次；ID选择器不能结合使用；当使用Js时，需要使用Id:GetElementById()
5、属性选择器：[title]{} ，title是属性的名称
也可以根据具体的属性值进行选择：除了选择拥有某些元素，还可以进一步缩小选择范围，只选择有特定属性值的元素，例如：a[href="www.baidu.com"]{};
也可以指定属性和属性值完全匹配；
也可以根据部分属性值选择。
6、后代选择器：后代选择器
7、子元素选择器：与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素,即只支持一层关系，不支持多层关系：h1>strong{}
8、相邻兄弟选择器：可选择紧接在另一个元素后的元素，且二者有相同父元素，例如：h1+p{},h1和p有相同父类
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link href="1.css" type="text/css" rel="stylesheet"> 7 <style> 8 /*简单属性选择*/ 9 [title]{ 10 font-size: 100px; 11 } 12 [href] { 13 font-size: 20px; 14 } 15 16 /*属性和属性值完全匹配*/ 17 [href="http://www.jikexueyuan.com"]{ 18 font-size: 40px; 19 } 20 21 /*部分属性选择器*/ 22 [title~="title"]{ 23 font-size: 100px; 24 } 25 </style> 26 </head> 27 <body> 28 <p>Hello World !</p> 29 <h1>标题1</h1> 30 <h2>标题2</h2> 31 <div class="div">Hello Css</div> 32 <a class="div">hello a class</a> 33 <p class="p1">this is p class p1</p> 34 <p class="p2">this is p class p2</p> 35 <!--class=p1 p2 的这个元素，包含了类p1 p2的属性，同时还可以自己再定义属性--> 36 <p class="p1 p2">this is p class p3</p> 37 <div id="mydiv">Hello Selector1</div> 38 39 <!--以下操作允许，class可以重复--> 40 <div class="div1"></div> 41 <div class="div1"></div> 42 <div class="div1"></div> 43 44 <!--以下操作不允许，id不能重复--> 45 <!--<div id="div1"></div>--> 46 <!--<div id="div1"></div>--> 47 <!--<div id="div1"></div>--> 48 49 <p title="">Hello 属性选择器</p> 50 <a href="">极客学院</a> 51 <a href="http://www.jikexueyuan.com">极客学院</a> 52 <p title="title hello">hello部分属性选择器</p> 53 <p>这是<strong>父<i>级</i></strong></p> 54 55 <div> 56 <ul> 57 <li>item1</li> 58 <li>item2</li> 59 <li>item3</li> 60 <li>item4</li> 61 </ul> 62 <ol> 63 <li>item11</li> 64 <li>item12</li> 65 <li>item13</li> 66 </ol> 67 </div> 68 </body> 69 </html>
对应的CSS文件：
1 /*选择器分组-通配符*/ 2 *{ 3 font-size: 50px; 4 margin: 0px; 5 padding: 0px; 6 } 7 8 /*元素选择器*/ 9 p{ 10 color: coral; 11 } 12 13 /*选择器分组*/ 14 h1,h2{ 15 color: red; 16 } 17 18 /*类选择器*/ 19 .div{ 20 color: aqua; 21 } 22 23 /*类选择器结合元素选择器*/ 24 a.div{ 25 color:darkgoldenrod; 26 } 27 28 .p1{ 29 color: darkgoldenrod; 30 } 31 .p2{ 32 font-size: 30px; 33 } 34 35 /*多类选择器*/ 36 .p1.p2{ 37 font-style:italic; 38 } 39 40 /*id 选择器*/ 41 #mydiv{ 42 color: chocolate; 43 } 44 45 /*后代选择器*/ 46 /*p strong{*/ 47 /*color: aquamarine;*/ 48 /*}*/ 49 /*p strong i{*/ 50 /*font-style: italic;*/ 51 /*}*/ 52 53 /*子元素选择器只能一层*/ 54 p>strong{ 55 color: fuchsia; 56 font-size: 30px; 57 } 58 59 /*相邻兄弟选择器*/ 60 li+li{ 61 font-size: 50px; 62 color:blanchedalmond; 63 }
标签：
原文地址：http://www.cnblogs.com/bluebirid/p/5222351.html
