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.3] DatePicker & UIToolBar
			
    A.需求 1. 学习DatePicker的基本配置 2.使用TextField召唤指定类型的输入键盘View,这里使用DatePicker 3.给输入键盘上方加上一个UIToolBar,实现如关闭键盘 ...
    
			
    2. 
						
  2. Linux使用locate命令定位文件
			
    FIND命令 很多Linux用户喜欢使用find命令来查找文件,例如他们通常喜欢这样做: find / -name 'pattern' 确实find的强大功能不仅仅用来查找文件,它能用来定位更加细节的 ...
    
			
    3. 
						
  3. POJ 2828 Buy Tickets (线段树 or 树状数组+二分)
			
    题目链接:http://poj.org/problem?id=2828 题意就是给你n个人,然后每个人按顺序插队,问你最终的顺序是怎么样的. 反过来做就很容易了,从最后一个人开始推,最后一个人位置很容 ...
    
			
    4. 
						
  4. 001_bytearray
			
    bytearray([source [, encoding [, errors]]]) 中文说明: bytearray([source [, encoding [, errors]]])返回一个byt ...
    
			
    5. 
						
  5. ajax乱码问题 服务端 客户端 两种的解决方案--转载
			
    今天弄了一天的Ajax中文乱码问题,Ajax的乱码问题分为两种: 1. JavaScript输出的中文乱码, 比如:alert("中文乱码测试"); 2. 这第二种就是Ajax从服 ...
    
			
    6. 
						
  6. WinDbug之DUMP蓝屏分析
			
    Microsoft (R) Windows Debugger Version 6.2.8400.0 X86Copyright (c) Microsoft Corporation. All rights ...
    
			
    7. 
						
  7. C++转义字符 &amp; keyword
			
    转义字符: 换行符 \n   水平制表符\t 纵向制表符 \v 退格符 \b 回车符 \r   进纸符 \f 报警(响铃)符 \a 反斜线 \\ 疑问号 \? 单引號 \' 双引號 \"   ...
    
			
    8. 
						
  8. Hdu 5568 sequence2 高精度 dp
			
    sequence2 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=556 ...
    
			
    9. 
						
  9. swift获取图片像素颜色值
			
    extension UIImage{ /** 获取图片中的像素颜色值 - parameter pos: 图片中的位置 - returns: 颜色值 */ func getPixelColor(pos: ...
    
			
    10. 
						
  10. day06 Java面向对象
			
    1.对象内存图 (1)1个对象的内存图:一个对象的基本初始化过程 (2)2个对象的内存图:方法的共用 (3)3个对象的内存图:其中有两个引用指向同一个对象
    
			
    11.