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. UVaLive 7270 Osu! Master (统计)
			
    题意:给定 n 个元素,有的有一个值,如果是 S 那么是单独一个,其他的是一个,求从 1 开始的递增的数量是多少. 析:那么S 是单独的,要统计上,既然是从 1 开始递增的,那么再统计 1 的数量即可 ...
    
			
    2. 
						
  2. MFC编辑框换行实现
			
    MFC中换行实现 在mfc中编辑框允许输入多行时,换行符被表示为<归位><换行>即“\r\n”,用ascii码表示为13 10 如果为编辑框中想要输入换行,就请将编辑框的属性: ...
    
			
    3. 
						
  3. Elasticsearch和mysql数据同步（logstash）
			
    1.版本介绍 Elasticsearch: https://www.elastic.co/products/elasticsearch 版本:2.4.0   Logstash: https://www ...
    
			
    4. 
						
  4. <math.h>与<float.h>
			
    (一) <math.h> <math.h>文件中已经定义了M_PI,如下所示,用户可以直接使用: //math.h........................ #if de ...
    
			
    5. 
						
  5. MFC 视图、文档、框架（通讯）
			
    CMainFrame * pMainWnd=(CMainFrame*)AfxGetApp()->m_pMainWnd;//主框架 CChildFrame * pChild = (CChildFr ...
    
			
    6. 
						
  6. IE 、Firefox、Chrome 浏览器在 F12 控制台下切换至不同框架介绍
			
    有不少网页的页面,还在使用 iframe 标签,而此时,相当于页面有两个 window 对象,一个为当前页面 window ,另一个则为 iframe 页面下的 window .因为,有时候需要在 c ...
    
			
    7. 
						
  7. CSS3教程:Transform的perspective属性设置
			
    1 2   <div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(4 ...
    
			
    8. 
						
  8. 得到内网域管理员的5种常见方法<转>
			
    1.Netbios and LLMNR Name Poisoning 这个方法在WIN工作组下渗透很有用,WIN的请求查询顺序是下面三个步骤:本地hosts文件(%windir%\System32\d ...
    
			
    9. 
						
  9. JQuery的Ajax使用Get,Post方法调用C#WebService并返回数据
			
    本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据,另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题,还有出 ...
    
			
    10. 
						
  10. Struts2常量的具体用法实例(一)
			
    XML代码: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC  ...
    
			
    11.