CSS和html如何结合起来——选择符及优先级

 

         1.选择符

    兼容性
统配选择符 *  
     
元素选择符 body  
类选择符 .class  
id选择符 #id  
     
包含原则符 p strong     (所有后代)  
子代选择符 p>strong    (紧跟子代) lte IE7 
相邻选择符 h1+p          (h1后面第一个p元素) lte IE7 
     
属性选择符 button[class]    (带有class属性的button) lte IE7 
  button[class="switcher"]       (class等于switcher) lte IE7 
  button[class~="switcher"]     (class中包含独立switcher) lte IE7 
  button[class|="switcher"]     (class以switcher开头-连字符分割) lte IE7 
     
伪类(不同状态) a:link   a:hover  a:visited  a:active   (:hover 也可用于其它元素) lte IE7 
  input : focus   (当拥有键盘输入焦点时添加样式) lte IE7 
  ul: first-child   (向元素的第一个子元素添加样式) lte IE7 
  p:lang(fl)        (带有lang元素为fl 的p元素添加样式) lte IE7 
     
伪对象(额外信息) p:before {content:'XX' }   (在元素之前添加内容) lte IE7 
  p:after {content:'XX' }      (在元素之后添加内容) lte IE7 
  p: first-letter                      (向文本的第一个字母添加样式) lte IE7 
  p: first-line                         (向文本的首行添加特殊样式) lte IE7 
     
选择符组合, div#header,div#footer  

         2.优先级

/*  
lte:就是Less than or equal to的简写,也就是小于或等于的意思。

lt :就是Less than的简写,也就是小于的意思。

gte:就是Greater than or equal to的简写,也就是大于或等于的意思。

gt :就是Greater than的简写,也就是大于的意思。

! :就是不等于的意思,跟javascript里的不等于判断符相同。
*/

 

            开发人员编辑的CSS样式中根据选择符组合来决定优先级别,权重值会累加。

权重值 选择符或属性
最高 !important
1000 HTML标签内style属性 (不建议使用,结构样式分离)
100 ID选择符
10 类选择法、属性选择符
1 标签选择符、伪类及伪对象
0 其它选择符:如通配选择符

元素本身设置的样式高于继承的样式,不用考虑权重值。

 

 

posted @ 2015-08-04 19:21  331415706  阅读(751)  评论(0编辑  收藏  举报