CSS-选择器汇总

CSS中的选择器

选择器：通过选择器，可以选择页面中的指定元素

 

常用选择器

 

元素选择器：

　　作用：根据标签名称来选中指定的元素

　　语法：标签名称 {   }

　　例子：p{  } ;  h1{  } ;  div{  } 

 

id选择器：

　　作用：根据id名称来选中指定的元素

　　语法：#id属性值{   }

　　例子：<p id="abc"></p>

　　　　　<style>

　　　　　　　　#abc{  }

　　　　   </style>

 

类选择器：

　　作用：根据类名来选中指定的元素

　　语法：.class属性值{   }

　　※一个标签里可以包含多个class，看style内谁在上面

　　例子：<p class="abc aaa"></p>

　　　　　　 <style>

　　　　　　　　.abc{  }

　　　　　　　　.aaa{  }

　　　　       </style>

 

复合选择器

交集选择器

　　作用：选中同时符合多个条件的元素

　　语法：选择器1 选择器2 选择器3 选择器n{   }

　　注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

 

并集选择器

　　作用：同时选择多个选择器对应的元素

　　语法：选择器1,选择器2,选择器3,选择器n{   }

　　例如：#b1,.p1,h1,span,div.red{   }

 

关系选择器

子元素选择器

　　作用：选中指定父元素内的指定子元素

　　用法：父元素 > 子元素 {  }

 

后代元素选择器

　　作用：选中指定元素内的指定后代元素

　　用法：祖先元素 后代元素 {  }

 

兄弟元素选择器

 

　　选择下一个指定兄弟

　　　　用法：前一个兄弟元素 + 后一个兄弟元素{  }

　　　　例子：div + span { color : red; }(仅在div后的第一个兄弟span生效)

 

　　选择下边所有指定兄弟

　　　　用法：兄元素 ~ 弟元素{  }

　　　　例子：div ~ span { color : red; }(div后的所有兄弟span生效)

 

 

属性选择器

　　　　用法：[属性名] 选择含有指定属性的元素

　　　　　　　[属性名 = 属性值] 选择含有指定属性和属性值的元素

　　　　　　　[属性名 ^= 属性值] 选择属性值以指定值开头的元素

　　　　　　　[属性名 $= 属性值] 选择属性值以指定值结尾的元素

　　　　　　　[属性名 *= 属性值] 选择属性值中含有某值的元素

　　　　例子：<p title="abc"></p>

　　　　　　　　p[title]{ color : red  }

　　　　　　　　p[title = abc]{ color : red  }

　　　　　　　　p[title ^= abc]{ color : red  }

　　　　　　　　p[title $= abc]{ color : red  }

　　　　　　　　p[title *= abc]{ color : red  }