1.写在前面
可能对于初学者来说，掌握了几种基本的选择器，而对于css提供的更加强大的选择器没有太多接触，但是随着学习的深入，代码量的增加，越发觉得css的其他选择器的重要性凸显而出。使用更加强的选择器，不仅方便而且大大减少了代码量，这里就总结的css的各种选择器。
当然这里只是列举了一部分，css的选择器是非常强大的，不过剩下的选择器的用法和我下面讲过的类似，大家只需要在需要的时候查阅开发文档即可。
2.基本的选择器
id选择器和class选择器
1 <style>
/*类选择器*/ 2 .p1{ 3 color: red; 4 } 5 /*让p标签为p1类的采用的样式*/ 6 p.p1{ 7 color: blue; 8 } 9 /*id选择器*/ 10 #p1{ 11 color: yellow; 12 } 13 </style> 14 </head> 15 <body> 16 <p class="p1">这是一句话，class为p1</p> 17 <h1 class="p1">这是一个标题,class为p1</h1> 18 <p id="p1">这是一句话，id为p1</p> 19 </body>
3.分组选择器
分组选择器可以把统一样式应用在自己想要的不同场景。
1 <style type="text/css"> 2 /*把h1-h3的标题设置为红色*/ 3 h1,h2,h3{ 4 color: red; 5 } 6 /*把h4-h6的标题设置为蓝色*/ 7 h4,h5,h6{ 8 color: blue; 9 } 10 </style> 11 12 </head> 13 <body> 14 <h1>这是1号标题</h1> 15 <h2>这是2号标题</h2> 16 <h3>这是3号标题</h3> 17 <h4>这是4号标题</h4> 18 <h5>这是5号标题</h5> 19 <h6>这是6号标题</h6> 20 </body>
4.嵌套选择器
嵌套选择器解释比较麻烦，直接上代码理解。
1 <style type="text/css"> 2 .p1{ 3 color: red; 4 } 5 /*让p2类中p标签采用的样式*/ 6 .p2 p{ 7 color: blue; 8 } 9 /*设置所有p2类的样式*/ 10 .p2{ 11 color: yellow; 12 } 13 </style> 14 15 </head> 16 <body> 17 <p class="p1">这个p标签在外</p> 18 <div class="p2"> 19 <p>这个p标签在里面</p> 20 <h1>这个标题在里面</h1> 21 </div> 22 </body>
5.组合选择器
后代选择器：
1 <style type="text/css"> 2 /*后代选择器，用空格隔开 3 选取多个后代可以用“，”隔开 4 */ 5 div p, h1{ 6 color: red; 7 } 8 p{ 9 color: blue; 10 } 11 </style> 12 13 14 </head> 15 <body> 16 <div> 17 <p>这个p标签在里面</p> 18 <h1>这个h1标签在里面</h1> 19 </div> 20 <p>这个p标签在里面<</p> 21 </body>
一直追踪后代
1 <style type="text/css"> 2 /*后代选择器，顾名思义，不论你有多少后代，会追踪到符合的后代为止 3 */ 4 /*这个例子可以看到p是div的子元素的子元素*/ 5 div p{ 6 color: red; 7 } 8 9 </style> 10 11 12 </head> 13 <body> 14 <div> 15 16 <h1><p>这个p标签在里面</p></h1> 17 </div> 18 19 </body>
子元素选择器：
与后代选择器的不同是，子元素选择器只会应用在第一个子元素，而不会追溯更远的后代。
符号用>
1 <style type="text/css"> 2 3 div>p{ 4 color: red; 5 } 6 7 </style> 8 9 10 </head> 11 <body> 12 <div> 13 <h1><p>这个p标签是div的后代（子元素的子元素）</p></h1> 14 </div> 15 <div> 16 <p>这个p标签是div的直接子元素</p> 17 </div> 18 </body>
相邻兄弟选择器：
相邻兄弟选择器是具有相同父元素的元素之间的选择，并且选择的是紧邻的一下个。
符号为+
1 <style type="text/css"> 2 3 div+p{ 4 color: red; 5 } 6 7 </style> 8 9 10 </head> 11 <body> 12 13 <div> 14 <p>这个p标签是div的子元素</p> 15 </div> 16 17 <p>这个p元素在外面，是div的兄弟</p> 18 <p>这个p元素在外面，但不是下一个紧邻的，所以不应用样式</p> 19 </body>
普通相邻兄弟选择器：
与兄弟选择器的不同是，它会选取所有，而不管时候紧邻。
1 <style type="text/css"> 2 3 div~p{ 4 color: red; 5 } 6 7 </style> 8 9 10 </head> 11 <body> 12 13 <div> 14 <p>这个p标签是div的子元素</p> 15 </div> 16 17 <p>这个p元素在外面，是div的兄弟</p> 18 <p>这个p元素在外面，但不是下一个紧邻的，所以不应用样式</p> 19 </body>
6.属性选择器
下面介绍的是属性选择器的高级应用，不单单是id和class是属性，凡属性皆可用。
1.[属性]
选择含有这个属性的元素。
1 <style type="text/css"> 2 3 [href]{ 4 color: red; 5 } 6 7 </style> 8 </head> 9 <body> 10 <a href="#">这是一个链接到本地的a标签</a> 11 <a href="http://www.baidu.com">这是一个链接到百度的a标签</a> 12 <a>这是一个没有链接的a标签</a> 13 14 </body>
还可以为属性匹配的值相同的才应用样式
1 [href="#"]{ 2 color: red; 3 } 4 5 </style> 6 </head> 7 <body> 8 <a href="#">这是一个链接到本地的a标签</a> 9 <a href="http://www.baidu.com">这是一个链接到百度的a标签</a> 10 <a>这是一个没有链接的a标签</a> 11 12 </body>
属性多值选择器，可以匹配包含了的值的。
1 <style> 2 [title~=hello] 3 { 4 color:blue; 5 } 6 </style> 7 </head> 8 9 <body> 10 <h2>Will apply to:</h2> 11 <h1 title="hello world">Hello world</h1> 12 <p title="student hello">Hello CSS students!</p> 13 <hr> 14 <h2>Will not apply to:</h2> 15 <p title="student">Hi CSS students!</p> 16 </body>
针对表单的选择器
1 <style type="text/css"> 2 3 input[type="button"]{ 4 color: red; 5 6 } 7 8 </style> 9 </head> 10 <body> 11 <input type="text" name="" value="没有应用样式"> 12 <input type="button" name="" value="红色"> 13 </body>