选择器
Posted 成功人土
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选择器相关的知识，希望对你有一定的参考价值。
---恢复内容开始---
类选择器
<span></span>标签把要改变的文字标注起来，在span里写上类<span class="stress"></span>在样式中写出相应方法(类前必须要有小圆点)，(.stress{color:red;})
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>认识html标签</title> 6 <style type="text/css"> 7 .stress{ 8 color:red; 9 } 10 .setGreen{ 11 color:green; 12 } 13 14 </style> 15 </head> 16 <body> 17 <h1>勇气</h1> 18 <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> 19 <p>到了三年级下学期时，我们班上了一节<span class="setGreen">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> 20 <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > 21 </body> 22 </html>
id选择器
<span id="setGreen"></span>在css列表方法中(#setGreen{color:green;})(都是改变的内嵌的文字样式)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>认识html标签</title> 6 <style type="text/css"> 7 #stress{ 8 color:red; 9 } 10 #setGreen{ 11 color:green; 12 } 13 </style> 14 </head> 15 <body> 16 <h1>勇气</h1> 17 <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> 18 <p>到了三年级下学期时，我们班上了一节<span id="setGreen">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> 19 20 </body> 21 </html>
类选择器与id选择器
子选择器：大于符号(>),用于选择指定标签元素的第一代元素。如(不要忘记小圆点).food>li{border:1px solider red;green}(设置边框为1px宽，实现，红色，注意当文字颜色设置为绿色时，边框如果设置为红色，则边框颜色不变，如果边框没设置颜色，则边框颜色变为绿色，若边框颜色设置为红色，文字颜色没设置，则文字颜色不变)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>子选择符</title> 6 <style type="text/css"> 7 .food>li{border:1px solid red;color;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ 8 .first>span{border:1px solid red;} 9 </style> 10 </head> 11 <body> 12 <p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> 13 <h1>食物</h1> 14 <ul class="food"> 15 <li>水果 16 <ul> 17 <li>香蕉</li> 18 <li>苹果</li> 19 <li>梨</li> 20 </ul> 21 </li> 22 <li>蔬菜 23 <ul> 24 <li>白菜</li> 25 <li>油菜</li> 26 <li>卷心菜</li> 27 </ul> 28 </li> 29 </ul> 30 </body> 31 </html>
后代选择器，(.food li{border:1px solider red;green})(中间以空格区分)作用于整个后代,
子选择器通过>号，后代选择器通过空格，子选择器只作用于第一个子类，而后代选择器作用于所有之类
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>后代选择器</title> 6 <style type="text/css"> 7 .first span{color:red;} 8 9 .food li{ 10 border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ 11 } 12 </style> 13 </head> 14 <body> 15 <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> 16 <!--下面是本小节任务代码--> 17 <ul class="food"> 18 <li>水果 19 <ul> 20 <li>香蕉</li> 21 <li>苹果</li> 22 <li>梨</li> 23 </ul> 24 </li> 25 <li>蔬菜 26 <ul> 27 <li>白菜</li> 28 <li>油菜</li> 29 <li>卷心菜</li> 30 </ul> 31 </li> 32 </ul> 33 34 </body> 35 </html>
通用选择器：通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，*{color：red;}
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>* 选择符</title> 6 <style type="text/css"> 7 * {color:red; 8 font-size:20px;} 9 10 11 </style> 12 </head> 13 <body> 14 <h1>勇气</h1> 15 <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> 16 <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> 17 <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > 18 </body> 19 </html>
伪类选择符:它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色,在css样式中设置(a:hover{color:red;})(hover:鼠标滑动时改变）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>伪类选择符</title> 6 <style type="text/css"> 7 a:hover{ 8 color:red; 9 font-size:20px; 10 } 11 </style> 12 </head> 13 <body> 14 <h1>勇气</h1> 15 <p class="first">三年级时，我还是一个<a href="http://www.imooc.com">胆小如鼠</a>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> 16 <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> 17 <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > 18 </body> 19 </html>
分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：h1,span{color:red;}
为一个类标签中某个标签中设定样式 #second span{color:red;}
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>分组选择符</title> 6 <style type="text/css"> 7 .first,#second span{ 8 color:green; 9 } 10 </style> 11 </head> 12 <body> 13 <h1>勇气</h1> 14 <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> 15 <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> 16 <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > 17 </body> 18 </html>
---恢复内容结束---
以上是关于选择器的主要内容，如果未能解决你的问题，请参考以下文章
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。