CSS选择器：
基本可以分为通配选择器，标签选择器，类选择器，ID选择器，简单属性选择，具体属性选择，根据部分属性值选择，特定属性选择，从结构上来分还有后代选择器，子元素选择器，相邻兄弟选择器以及伪类。
详细一些请见下表：
类型选择符 E{}
属性选择符
E[attr]{}
E[attr=value]{}选择具有attr属性且属性值等于value的E
E[attr~=value]{}选择具有attr属性且属性值为用-连字符分隔的字词列表，由value开始的E.例如
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>

 <head>

 <style type="text/css">

 p[class~="important"]

 {

 color: red;

 }

 </style>

 </head>

 <body>

 <h1>可以应用样式：</h1>

 <p class="important warning">This is a paragraph.</a>

 <p class="important">This is a paragraph.</a>

 <hr />

 <h1>无法应用样式：</h1>

 <p class="warning">This is a paragraph.</a>

 </body>

 </html>
除了上面的三个，还有部分请见下表


包含选择符（又称后代选择符） E1 E2{}

子对象选择符 E1>E2{}

ID选择符 #ID{}

类选择符 E.className{}

选择符分组 E1,E2,E3{}

结合后代选择器，类选择器和子选择器 例如：table.company td>p
上面的选择器会选择作为td元素子元素的所有P元素，这个td元素本身从table元素继承，并且该table元素有一个包含company的class属性。

相邻兄弟选择器 E1 + E2｛｝这里需要注意的是用一个选择符只能选择两个相邻兄弟中的第二个元素，举个例子 li + li {font-weight:bold;}只会把第二项和第三项加粗，第一个列表项步受影响
 <!DOCTYPE HTML>

 <html>

 <head>

 <style type="text/css">

 li + li {font-weight:bold;}

 </style>

 </head>

 <body>

 <div>

   <ul>

     <li>List item </li>

     <li>List item </li>

     <li>List item </li>

   </ul>

   <ol>

     <li>List item </li>

     <li>List item </li>

     <li>List item </li>

   </ol>

 </div>

 </body>

 </html>
结果为还有一点要注意的是，顾名思义，相邻兄弟一定要有相同的父元素。

伪类及伪对象选择符：
伪类

伪元素

举例如下：
<html>

<head>

<style type="text/css">

p:first-line

{

color: #ff0000;

font-variant: small-caps

}

</style>

</head>

<body>

<p>

You can use the :first-line pseudo-element to add a special effect to the first line of a text!

</p>

</body>

</html>
元素p中的内容颜色和字体就都变成了这样


哪些可以继承呢
可以的有 font-size font-family color  
不可以的有 border padding margin background-color width height等

优先级算法计算的问题：

在多个选择符应用于同一个元素上那么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,61个属性选择符{ [id=”totals”] }      Specificity值为0,0,1,0 2个其他选择符{ >  > }            Specificity值为0,0,0,0 最终：Specificity值为 0,0,1,6   
用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。
												


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

    
								
  1. css选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先
		
    通配选择符* { sRules }  类型选择符E { sRules }  td { font-size:14px; width:120px; }   属性选择符 E [ attr ] { sRule ...
    
		
    2. 
						
  2. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？
		
    CSS 选择符有哪些? 1.id选择器(#id) 2.类选择器(.class) 3.标签选择器(div,h1,p) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器 ...
    
		
    3. 
						
  3. 你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？
		
    css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...
    
		
    4. 
						
  4. Css中的两个重要概念：块状元素和内联元素
		
    一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...
    
		
    5. 
						
  5. 508，css优先级算法如何计算？
		
    优先级就近原则,同权情况下样式定义最近者为准 载入样式以最后载入的定位为准 优先级:!important>id > class >tag;  !important比内联优先级高 (百 ...
    
		
    6. 
						
  6. css选择器，选择指定属性的值
		
    选择属性为href的值: <a class='test' href='www.baidu.com' >test</a> response.css('.test::attr(hr ...
    
		
    7. 
						
  7. CSS选择器的权重与优先规则？
		
    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
    
		
    8. 
						
  8. CSS 选择器权重计算规则
		
    其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
    
		
    9. 
						
  9. python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）
		
    11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.l ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. word2003公式编辑器公式显示不完整问题
			
    在段落里设置行距为:单倍行距.
    
			
    2. 
						
  2. HDU 1150 Machine Schedule (二分图最小点覆盖)
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1150 有两个机器a和b,分别有n个模式和m个模式.下面有k个任务,每个任务需要a的一个模式或者b的一个 ...
    
			
    3. 
						
  3. 方差分析（ANOVA）(转）
			
    转自:http://blog.sciencenet.cn/blog-116082-218338.html 方差分析(analysis of variance,ANOVA),即变量分析,是对多个样本平均 ...
    
			
    4. 
						
  4. 数据访问层DAL(数据库访问抽象类DataProvider)
			
    晒晒数据访问层DAL,看看你的项目数据访问层使用的是什么形式,数据访问性能比较 采用什么样的数据访问形式是软件编码很重要的一个环节,良好的数据访问形式不仅能够提搞代码的执行效率,协作能力,更重要的是对 ...
    
			
    5. 
						
  5. mockjs学习总结（方便前端模拟数据，加快开发效率）
			
      基本介绍: 在我们前端开发中经常遇到这样的事情,接口没有写好,只能写静态页面,如何才能用很简单的方法模拟后端数据呢?mockjs就干了这件事,而且干的还挺好. 下面是我作为初学者的一些总结经验,期 ...
    
			
    6. 
						
  6. JQuery ajax请求一直返回Error（parsererror）
			
    $.ajax({ type :"post", url :"busine_in.action", timeout : 40000, data: "cen ...
    
			
    7. 
						
  7. 如何将mysql表结构导出成Excel格式的（并带备注）
			
    http://www.liangchan.net/liangchan/4561.html 1.使用一个mysql管理工具:SQLyog,点击菜单栏“数据库”下拉的最后一项: 导出的格式如下: 2.要想 ...
    
			
    8. 
						
  8. mac下批量删除.svn文件
			
    mac下.svn是隐藏文件,而且即使我们调成可见的,一个一个删也很麻烦.今天正好同事问起来这个命令,于是想可能有些人也需要,于是还是放到博客里吧 命令比较简单,其实就是一条linux命令,打开终端,首 ...
    
			
    9. 
						
  9. Cucumber 入门一
			
    (转自:http://www.cnblogs.com/jarodzz/archive/2012/07/02/2573014.html) 第一次看到Cucumber和BDD(Behavior Drive ...
    
			
    10. 
						
  10. pager 命令
			
    https://www.percona.com/blog/2013/01/21/fun-with-the-mysql-pager-command/ Last time I wrote about a  ...
    
			
    11.