CSS13种选择器

CSS选择器

CSS选择器也称为选择符，用于选择需要添加样式的元素

1. 全局选择器（通配符选择器）：用于选择需要添加样式的元素
   如： *{margin:0;padding:0;}
   通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需要酌情使用。
2. 标签选择器（元素选择符）：用于声明标记采用的样式
   如：p{color:red;}
3. 类别选择器：用来为相同的类名标签定义相同的样式。
   类别选择器在页面上会有很多

   1. 先使用class在便签上定义类名 ：如 <p class="p1"></p>
   2. 设置并应用样式：<style typpe="text/css">
   					.p{color:red;}
   				  </style>
   3. 同一个标签，可以拥有多个类名，类名用空格隔开
   	<p class="类名1 类名2"></p>
   class可以重复，也就是说，同一个页面上可能有很多个标签同时属于一个类，同一个标签可以有多个类。
   

4. ID选择器：id名在同一个页面只能使用一次
   语法：<p id="“p1”>
   #p1{color:red;}
5. 伪类选择器：用伪类定义的样式并不是作用在标记上的，而是作用在标记的状态上。
   四种状态：(多用于超链接)
   • 默认效果-——a:link{}
   • 访问后效果——a:visited{}
   • 鼠标移动过去效果——a:hover{}
   • 链接被激活的效果——a:active{}
     一般我们会给a超链接设置默认效果和滑过效果
6. 其他伪类选择符 :first-child :last-child :nth-chlid()
7. 属性选择器 ：选择具有选择属性的元素
   如： E[att]:选中具有att属性的E元素
8. 群选择器 如：h1,h2,h3,h4,h5{} 用逗号隔开每个元素
9. 后代选择器：用于选择指定标签元素下的后辈元素
   如：p a{} 选择p元素包裹的所有a元素，注意中间用空格隔开
10. 子代选择器：用于选择指定标签元素的第一代子元素
    如：p>a{} 选择所有作为p元素子代的第一代a元素，注意用>号拼接
11. 相邻选择器：选择紧贴在元素之下的元素(同级)
    如： p+a{} 选中p元素之后的a元素
12. 兄弟选择器：选择选中元素的后面所有兄弟元素
    如：p~a{} 选中p元素后面的所有兄弟元素a
13. 交叉选择器
    “交集"选择器：由俩个选择器直接链接构成，其结果时选中二者各自元素范围的交集，其中第一必须是标记选择器，第二个必须是类别选择器或则ID选择器，两个选择器之间不能由空格必须连续书写。
    如：

h1.class{colro:red;}
<p class="zf"></p>
<h1 class="zf"></h1>
<h1></h1>
	交集选择器将选中同时满足前后二者定义的元素，也就是前者定义的标记类型，并且指定了后者的
	类别或ID的元素。