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. [iOS基础控件 - 6.10.4] 项目启动原理 项目中的文件
			
    A.项目中的常见文件 1.单元测试Test   2.Frameworks(xCode6 创建的SingleView Project没有) 依赖框架   3.Products 打包好的文件   4. p ...
    
			
    2. 
						
  2. linux系统中如何查看日志 (常用命令)
			
    cat tail -f 日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全相关 ...
    
			
    3. 
						
  3. IP访问SQL数据库设置
			
    http://wenku.baidu.com/link?url=mnjuPMo9qJvzluCHEvqVDawpuloKeGla05a2L3UtqzD_bF1VJMb7jHY4SBhuYH3-K_xF ...
    
			
    4. 
						
  4. python函数介绍
			
    1.向函数传递信息 def greet_user(username): print('Hello,' + username.title() + '!') greet_user('jesse') 2.位 ...
    
			
    5. 
						
  5. PostgreSQL的 initdb 源代码分析之二
			
    继续分析 下面这一段,当 initdb --version 或者  initdb --help 才有意义. ) { ], || strcmp(argv[], ) { usage(progname);  ...
    
			
    6. 
						
  6. [小技巧]設定Reporting Services 2008 發生報表管理員權限不足
			
    转载 http://www.dotblogs.com.tw/dorlis.tsao/archive/2011/01/17/20860.aspx 在自己Windows 7 professional的電腦 ...
    
			
    7. 
						
  7. Keil C51基本数据类型
			
    
			
    8. 
						
  8. Java模拟登陆新浪微博抓取数据【转载】
			
    package com.shiyimm.crawler.weibo; import java.io.FileNotFoundException; import java.io.FileReader;  ...
    
			
    9. 
						
  9. Codeforces Round #326 (Div. 2) C. Duff and Weight Lifting 水题
			
    C. Duff and Weight Lifting Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest ...
    
			
    10. 
						
  10. MyBatis之六：缓存
			
    MyBatis 3中的缓存实现的很多改进都已经实现了,使得它更加强大而且易于配置.默认情况下是没有开启缓存的,除了局部的session缓存,可以增强变现而且处理循环依赖也是必须的.要开启二级缓存,你需 ...
    
			
    11.