Home思洋影视事业部网站建设知识库
0 Comments

深入剖析CSS层叠与继承的使用(2)

发布于：2013-07-17  |   作者：广州网站建设  |   已聚集：人围观

二、CSS继承

所谓CSS继承，就是父元素的规则也会适用于子元素。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。CSS继承得来的规则没有特殊性。下面看一个简单的例子：
广州网站建设,网站建设,广州网页设计,广州网站设计

Example Source Code



    
	
  1. 
		<html xmlns="http://www.w3.org/1999/xhtml"> 
    2. 
	
  2. 
		<head> 
    3. 
	
  3. 
		    <title>CSS Cascadetitle> 
    4. 
	
  4. 
		    <style type="text/CSS">   
    5. 
	
  5. 
		     *{color:Blue;}  
    6. 
	
  6. 
		     div{color:Black;}  
    7. 
	
  7. 
		     .imp{color:Red !important;}  
    8. 
	
  8. 
		     #content{color:Green;}     
    9. 
	
  9. 
		    style> 
    10. 
	
  10. 
		head> 
    11. 
	
  11. 
		<body> 
    12. 
	
  12. 
		 <div>Hello <span>52CSS.comspan> div> 
    13. 
	
  13. 
		 <div id="content"> 
    14. 
	
  14. 
		    <p class="imp">Titlep> 
    15. 
	
  15. 
		    Content Goes Here.  
    16. 
	
  16. 
		 div> 
    17. 
	
  17. 
		body> 
    18. 
	
  18. 
		html>   
    19. 




	注意，第一行的CSS并没有继承div的黑色，这是因为通配符的缘故。通配符的特殊性虽然是全0，但是还是比继承的特殊性要高。第二行展示了!important标记的作用。 另外，一些明显不应该继承的属性，比如border,margin,padding之类的是不会被CSS继承的，具体可以参考CSS手册。



	三、其他



	虽然有4个整数来表示一个特殊性，仍然有可能出现两条冲突的规则的特殊性完全一致的情况，此时就按照CSS规则出现的顺序来确定，在样式表中最后一个出现的规则胜出。一般不会出现这样的情况，只有一个情况例外，考虑如下样式表：



	Example Source Code  




    
	
  1. 
		:active{color:Red;}  
    2. 
	
  2. 
		:hover{color:Blue;}  
    3. 
	
  3. 
		:visited{color:Purple;}  
    4. 
	
  4. 
		:link{color:Green;}      
    5. 
	
  5. 
		 
    6. 




	这样页面中的链接永远也不会显示红色和蓝色，因为一个链接要么被访问过，要么没有被访问过。而这两条规则在最后，因此总会胜出。如果改成这样:



	Example Source Code 




    
	
  1. 
		:link{color:Green;}    
    2. 
	
  2. 
		:visited{color:Purple;}  
    3. 
	
  3. 
		:hover{color:Blue;}  
    4. 
	
  4. 
		:active{color:Red;}  
    5. 
	
  5. 
		 
    6. 




	就能实现鼠标悬停和点击的瞬间变色的效果。这样的顺序的首字母正好连成 “LoVe HA”,这样的顺序被约定俗成的叫做Love Ha 规则。特殊性规则从理论上讲比较抽象和难懂，但在实践中，只要样式表是设计良好的，并不会有太多这方面的困扰，因此本文也不再做深究，更多的技术请参考51cto.com的文章更新！

	广州网站建设,网站建设,广州网页设计,广州网站设计


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机