`

css 之优先策略

    博客分类:
  • css
 
阅读更多
<html>
	<head>
	   <title>testCSS</title>		   
	   <style type="text/css">
	   	  h2{
	   	  		color:red;
	   	  }
        h2{
            color:green;
        }
        h3{
           color:red;
        }
        h5{
            color:green;
        }
	   	</style>
	   	<link rel="stylesheet" type="text/css" href="a.css" />
	</head>
	<body>
		    <h1 style="color:red;color:green">1.绿色,当内联的方式定义color:red;color:green,以后面的为准,后面会把前面的覆盖</h1>
		    <h2 >2.绿色,当内联的方式定义两次颜色,以后面的为准,后面会把前面的覆盖</h2>
		    <h3 style="color:green">3.当以内联和内部样式表的方式定义,内联优先于内部样式表</h3>
		    <h4 style="color:green">4.当以内联和内部样式表的方式定义,内联优先于内部样式表,与内部样式表存放的位置无关</h3>
		    <h5>5.当内部样式表和外部样式表同时定义时,与内联样式与外部样式表定义的顺序有关,以后面为准,后面会把前面的覆盖</h5>
	</body>
	<style type="text/css">   	 
        h4{
           color:red;
        }
	   	</style>
	   	 

</html>

 执行结果:

 

<html>
	<head>
	   <title>testCSS</title>		   
	   <style type="text/css">
	   	  h1{
	   	     color:green;
	   	  }
	   	  #h1id{
	   	     color:blue;
	   	  }
	   	  .h1class{
	         color:yellow;   	  
	   	  }
	   	  
	   	  #h2id h2{
	   	     color:blue;
	   	  }
	   	  .h2class h2{
	   	      color:yellow
	   	  }
	   	  div h2{
	   	     color:red;
	   	  }
	   	</style>
	</head>
	<body>
		   一、内联>>id选择器>>类选择器>>标签选择器   >>:表示优先的意思   <br>
		    <h1 style="color:red" id="h1id" class="h1class">1.红色 内联、标签选择器、类选择器、id选择器都符合,优先内联</h1>
		    <h1 style="" id="h1id" class="h1class">2.蓝色 标签选择器、类选择器、id选择器都符合,优先id选择器</h1>
		     <h1 style=""  class="h1class">3.黄色 标签选择器、类选择器都符合,优先类选择器</h1>
		     <h1 style="" >4.绿色 最终才是标签选择器</h1>
		   二、派生选择器依然遵守上面的规律  id派生>>类派生 >>标签派生 
		      <div id="h2id" class="h2class"><h2>1.蓝色</h2></div>
		      <div           class="h2class"><h2>2.黄色</h2></div>
		      <div                          ><h2>3.红色</h2></div>
	</body>
	
	   	 

</html>

  

  • 大小: 75.7 KB
  • 大小: 74.8 KB
分享到:
评论

相关推荐

    编写优秀 CSS 代码的 8 个策略.rar_css

    以下是一些关于如何编写优秀CSS代码的策略,这些策略可以帮助提升代码质量,确保代码的一致性、简洁性和易用性。 1. **模块化与组件化**:将CSS拆分为小而独立的模块或组件,可以提高代码复用性,减少冗余。使用...

    css揭秘、css权威指南,精通css

    作者详细讨论了如何优化布局、处理浮动、实现复杂的定位策略,以及如何避免和解决常见的CSS问题。这本书还介绍了CSS预处理器(如Sass和Less)的概念,使开发者能够编写更模块化、可维护的CSS代码。此外,书中涵盖的...

    CSS权威指南 css彻底设计研究 HTML5和CSS3实战 HTML5与CSS3设计模式

    设计模式是解决常见问题的标准化解决方案,此书可能包含了一些常见的网页设计模式,如模块化设计、响应式框架、移动优先策略等。读者将学习如何运用这些模式来构建可扩展、可维护和适应性强的网站。 通过以上四个...

    CSS样式初始化commonInitialize.css

    5. **响应式设计基础设置**:对于移动优先的设计策略,可以初始化一些媒体查询,如`@media screen and (max-width:XXXpx){...}`,以便在不同屏幕尺寸下应用不同样式。 6. **重置浏览器特定样式**:某些浏览器有特定...

    ie-css3.htc 免费版

    总的来说,ie-css3.htc是开发者为了兼容老版本IE浏览器而采取的一种过渡策略,它让那些无法直接理解CSS3的浏览器也能呈现一定的现代Web设计效果。尽管现在随着IE浏览器市场份额的下降和新型浏览器的普及,ie-css3....

    CSS样式说明书

    3. **响应式优先**:采用移动优先的策略编写CSS,确保在不同设备上都有良好体验。 4. **调试工具**:浏览器的开发者工具提供了查看和编辑CSS的功能,是学习和调试CSS的重要辅助。 通过深入学习和实践,您可以掌握...

    iecss3.htc支持输入框圆角

    值得注意的是,“iecss3.htc”文件需要放在服务器环境下才能正常工作,因为IE浏览器的安全策略不允许从本地文件系统直接访问HTC文件。因此,在实际应用时,确保文件路径正确且服务器已配置好是至关重要的。 另外,...

    让ie也支持css3

    针对这种情况,开发者们采取了一些策略来解决IE浏览器的兼容性问题,其中之一就是使用"行为"(Behavior)特性。 【标题】"让ie也支持css3"指的就是通过一种技术手段使老旧的IE浏览器能够识别并应用CSS3的一些新特性...

    css3.0参考手册_rater77_CSS3_easychmcss_css_

    7. **媒体查询**(Media Queries):这是CSS3响应式设计的核心,允许我们根据设备的屏幕尺寸、方向和其他特性来应用不同的样式,实现移动优先的设计策略。 8. **动画与过渡**:CSS3的transition和animation属性让...

    标准css开发工具包

    2. 学习资料:除了规范文档,工具包还可能包含教程、文章、视频课程等多元化学习资源,帮助初学者从基础到进阶,逐步掌握CSS的核心概念,如盒模型、浮动布局、定位策略等,并了解前沿技术如响应式设计和动画效果。...

    DIV+CSS完美布局

    DIV+CSS布局是现代网页设计中的关键技术之一,它摒弃了传统的表格布局方式,转而使用CSS(Cascading Style Sheets)样式来控制网页的布局和表现。这种方式能够实现更灵活、更易于维护的网页设计,并且有利于搜索引擎...

    Head first html &amp; css深入浅出html and css中文PDF

    例如,你将学会如何使用CSS创建渐变背景、边框和阴影效果,以及如何利用媒体查询实现移动优先的设计策略。同时,书中还会有关于浏览器兼容性和调试技巧的讨论,这对于实际开发工作来说至关重要。 此外,书中还涵盖...

    Head First HTML与CSS 第2版

    第二版还强调了移动优先的设计策略,教你如何编写适配不同屏幕尺寸的CSS代码。 书中的章节会涵盖响应式设计,这是现代网页开发的关键概念,它涉及到媒体查询和流式布局,确保网站在各种设备上都能良好显示。此外,...

    CSS.DIV实列

    这在移动优先的设计策略中非常重要。 ```css @media (max-width: 768px) { .container { width: 100%; } } ``` 4. **Flexbox布局**:CSS Flexbox允许我们轻松创建灵活的、响应式的布局。通过设置`display: ...

    导航菜单纯css

    在网页设计中,导航菜单是不可或缺的部分,它帮助用户在网站的不同页面间轻松跳转。...在实际的网页开发中,这种纯CSS实现的导航菜单具有响应式、轻量级和性能优良的特点,尤其适合移动优先的设计策略。

    7组漂亮的纯CSS3搜索框

    这样的设计对于移动优先的策略至关重要,确保用户无论在桌面还是手机上都有良好的体验。 第六组可能引入了动画效果,如过渡(transitions)或关键帧动画(keyframe animations),当用户与搜索框交互时,可以平滑地...

    纯css3 Tooltip工具提示样式

    这对于移动优先的Web开发策略至关重要,确保了在手机、平板电脑和桌面端的用户体验一致性。 总之,`microtip.css` 是一款高效、轻量级的纯CSS3 Tooltip解决方案,它让开发者能够在不依赖JavaScript的情况下实现丰富...

    常见的CSS技巧及常见问题

    5. **CSS的层叠和优先级**:CSS遵循“就近优先”原则,最近的样式定义将覆盖之前的定义。样式优先级的顺序为:行内样式(element style)&gt; 内联样式表(head内的) &gt; 外部样式表。优先级不受样式定义的先后顺序影响,...

    css兼容.txt

    5. **渐进增强与优雅降级**:优先保证基本功能可用,然后根据浏览器的能力逐步添加更高级的样式和功能。 #### 五、总结 为了确保CSS在各种浏览器中的表现一致,开发者需要采取一系列措施来处理兼容性问题。这包括...

    CSS设计指南(第3版)书+源码

    这在移动优先的设计策略中至关重要。 6. **CSS预处理器**:介绍Sass、Less等预处理器,了解它们如何提升CSS的编写效率,提供变量、嵌套规则、混合和函数等功能。 7. **CSS性能优化**:学习如何编写高效CSS,减少...

Global site tag (gtag.js) - Google Analytics