time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > CSS教程 > CSS选择器总结

CSS选择器总结

时间:2013-10-15 23:29 点击:6034次 字体:[ ]




在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下。

优先级

不同级别

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

2.作为style属性写在元素内的样式

3.id选择器

4.类选择器

5.标签选择器

6.通配符选择器

7.浏览器自定义

同一级别

同一级别中后写的会覆盖先写的样式

 

基础选择器

选择器 含义
* 通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用)
#id id选择器,匹配特定id的元素
.class 类选择器,匹配class包含(不是等于)特定类的元素
element 标签选择器

 

  1. *  
  2.         {  
  3.             /*页面所有元素都使用*/ 
  4.             border:0;  
  5.         }  
  6.  
  7.         #test 
  8.         {  
  9.             /*id=test 的元素*/ 
  10.             background-color:#0e0;  
  11.         }  
  12.  
  13.         .staus  
  14.         {  
  15.             /*含有类status的元素*/ 
  16.             border:0;  
  17.         }  
  18.  
  19.         div  
  20.         {  
  21.             /*页面所有div*/ 
  22.              background-color:#0e0;  
  23.         }  

组合选择器

选择器 含义
E,F 多元素选择器,用”,分隔,同时匹配元素E或元素F
E F 后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F
E>F 子元素选择器,用”>”分隔,匹配E元素的所有直接子元素
E+F 直接相邻选择器,匹配E元素之后相邻同级元素F
E~F 普通相邻选择器(弟弟选择器),匹配E元素之后同级元素F(无论直接相邻与否)
.class1.class2 这个姑且也算一个吧,没什么名字,匹配类名中既包含class1又包含class2的元素

我就不一一举例子了,选择器并不是只能写两层,发现有些小朋友有这种误解,认为只能写E>F这样的,我们写可以写E>F.class Element这样,你要你搞得定优先级



本文地址 : http://www.fengfly.com/plus/view-213926-1.html
标签: 选择器 css
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: