通配选择符* { sRules } 
 
类型选择符E { sRules }  
td { font-size:14px; width:120px; } 
  
属性选择符 
E [ attr ] { sRules } 
E [ attr = value ] { sRules } 
E [ attr ~= value ] { sRules } 
E [ attr |= value ] { sRules }  
h[title] { color: blue; }/* 所有具有title属性的h对象*/ 
span[class=demo] { color: red; }  
div[speed="fast"][dorun="no"] { color: red; } 
a[rel~="copyright"] { color:black; }

包含选择符E1 E2 { sRules } 
table td { font-size:14px; }

子对象选择符E1 > E2 { sRules } 
div ul>li p { font-size:14px; }

ID选择符 #ID { sRules } 
 
类选择符 E.className { sRules } 
 
选择符分组  
E1 , E2 , E3 { sRules } 
  
伪类及伪对象选择符  
E : Pseudo-Classes { sRules }  
( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang] 
E : Pseudo-Elements { sRules }  
( Pseudo-Elements )[:first-letter :first-line :before :after] 
可以继承的有:
font-size font-family color  
不可继承的一般有:
border padding margin background-color width height 等

关于CSS specificity  
CSS 的specificity 
特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,
specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表:  
规则:  
1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。 如:<div style=”color: red”>sjweb</div> 外部定义指经由<link>或<style>标签定义的规则; 
2.!important声明的Specificity值最高;  
3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;  
4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。

算法:  
当遇到多个选择符同时出现时候 按选择符得到的Specificity值逐位相加,  {数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0} 就得到最终计算得的specificity,  然后在比较取舍时按照从左到右的顺序逐位比较。
   
实例分析:  
1.div { font-size:12px;} 分析:  1个元素{ div},Specificity值为0,0,0,1   
2.body div p{color: green;} 分析:  3个元素{ body div p },Specificity值为0,0,0,3   
3.div .sjweb{ font-size:12px;} 分析:  1个元素{ div },Specificity值为0,0,0,1 1个类选择符{.sjweb},Specificity值为0,0,1, 0 最终:Specificity值为 0,0,1,1   
4.Div # sjweb { font-size:12px;} 分析:  1个元素{ div },Specificity值为0,0,0,1 1个类选择符{.sjweb},Specificity值为0,1,0, 0 最终:Specificity值为 0,1,0,1   
5.html > body div [id=”totals”] ul li > p {color:red;} 分析:  6个元素{ html body div ul li p}  Specificity值为0,0,0,6
1个属性选择符{ [id=”totals”] }      Specificity值为0,0,1,0 2个其他选择符{ >  > }            Specificity值为0,0,0,0 最终:Specificity值为 0,0,1,6  
 !important 的优先级最高

使用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag ,另外在同级样式按照申明的顺序后出现的样式具有高优先级。

css选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先的更多相关文章

  1. css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先

    CSS选择器:基本可以分为通配选择器,标签选择器,类选择器,ID选择器,简单属性选择,具体属性选择,根据部分属性值选择,特定属性选择,从结构上来分还有后代选择器,子元素选择器,相邻兄弟选择器以及伪类. ...

  2. CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?

    CSS 选择符有哪些? 1.id选择器(#id) 2.类选择器(.class) 3.标签选择器(div,h1,p) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器 ...

  3. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  4. CSS选择符详解

    一.类型选择符 什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是. 如下: body {} div {} p {} span {} ...

  5. 编写高效的CSS选择符(节选)

    最右边优先 css选择符是从右向左进行匹配的. 样式系统从最右边的选择符开始向左匹配规则.只要当前的选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和匹配的元素,或者因为不匹配而退出. ...

  6. JQuery学习笔记【CSS选择符】--02

    Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...

  7. CSS选择符详解之关系选择符篇

    原文:http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪 ...

  8. 整理CSS选择符

    1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...

  9. [css选择器]总结:IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

随机推荐

  1. JAVA语言基础——类型转换

    1.自动类型转换 自动类型转换又称作隐式转换,可以将一个int变量转换为float类型. public class Conver { public static void main(String[] ...

  2. PHP中的替代语法(冒号、endif、endwhile、endfor)

    我们经常在wordpress一类博客程序的模板里面看到很多奇怪的PHP语法,比如: <?php if(empty($GET_['a'])): ?> <font color=" ...

  3. vb6.0安装程序制作图解教程

    如何制作vb安装程序,是在学习Vb6.0过程中比较常见的一个入门问题. 在此笔者介绍一个最简单的安装方法,就是用VB自带的打包程序进行打包,虽然比较普通,不过内部却有不少窍门,相信这一点知道的人可能不 ...

  4. Android——android相对布局(RelativeLayout)及属性

    RelativeLayout布局 android:layout_marginTop="25dip" //顶部距离 android:gravity="left" ...

  5. Kazam: a perfect srceen recorder in Linux/Ubuntu

    Kazam provides a well designed and easy to use interface for capturing screencasts and screenshots. ...

  6. Installing Python 3.5.2 from source

    Here are the procedures we are to follow, Download the source code of an official Python release. Co ...

  7. 关于Ubuntu中passwd、shadow、group等文件

    在Ubuntu系统中,/etc目录下,有三个文件:passwd shadow group,可能我们已经在用了,但是没有注意到其详细. 这三个配置文件用于系统帐号管理,都是文本文件,可用vi等文本编辑器 ...

  8. json、javaBean、xml互转的几种工具介绍 (转载)

    工作中经常要用到Json.JavaBean.Xml之间的相互转换,用到了很多种方式,这里做下总结,以供参考. 现在主流的转换工具有json-lib.jackson.fastjson等,我为大家一一做简 ...

  9. 2013/7/16 HNU_训练赛4

    CF328B Sheldon and Ice Pieces 题意:给定一个数字序列,问后面的数字元素能够组成最多的组数. 分析:把2和5,6和9看作是一个元素,然后求出一个最小的组数就可以了. #in ...

  10. iOS - Swift NSFileManage 文件管理

    前言 public class NSFileManager : NSObject public class NSFileHandle : NSObject, NSSecureCoding NSFile ...