1. <html>
  2. <head>
  3. <title>testCSS</title>
  4. <style type="text/css">
  5. h2{
  6. color:red;
  7. }
  8. h2{
  9. color:green;
  10. }
  11. h3{
  12. color:red;
  13. }
  14. h5{
  15. color:green;
  16. }
  17. </style>
  18. <link rel="stylesheet" type="text/css" href="a.css" />
  19. </head>
  20. <body>
  21. <h1 style="color:red;color:green">1.绿色，当内联的方式定义color:red;color:green，以后面的为准，后面会把前面的覆盖</h1>
  22. <h2 >2.绿色，当内联的方式定义两次颜色，以后面的为准，后面会把前面的覆盖</h2>
  23. <h3 style="color:green">3.当以内联和内部样式表的方式定义，内联优先于内部样式表</h3>
  24. <h4 style="color:green">4.当以内联和内部样式表的方式定义，内联优先于内部样式表,与内部样式表存放的位置无关</h3>
  25. <h5>5.当内部样式表和外部样式表同时定义时，与内联样式与外部样式表定义的顺序有关，以后面为准，后面会把前面的覆盖</h5>
  26. </body>
  27. <style type="text/css">
  28. h4{
  29. color:red;
  30. }
  31. </style>
  32. </html>

执行结果：

  1. <html>
  2. <head>
  3. <title>testCSS</title>
  4. <style type="text/css">
  5. h1{
  6. color:green;
  7. }
  8. #h1id{
  9. color:blue;
  10. }
  11. .h1class{
  12. color:yellow;
  13. }
  14. #h2id h2{
  15. color:blue;
  16. }
  17. .h2class h2{
  18. color:yellow
  19. }
  20. div h2{
  21. color:red;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. 一、内联>>id选择器>>类选择器>>标签选择器   >>：表示优先的意思   <br>
  27. <h1 style="color:red" id="h1id" class="h1class">1.红色 内联、标签选择器、类选择器、id选择器都符合，优先内联</h1>
  28. <h1 style="" id="h1id" class="h1class">2.蓝色 标签选择器、类选择器、id选择器都符合，优先id选择器</h1>
  29. <h1 style=""  class="h1class">3.黄色 标签选择器、类选择器都符合，优先类选择器</h1>
  30. <h1 style="" >4.绿色 最终才是标签选择器</h1>
  31. 二、派生选择器依然遵守上面的规律  id派生>>类派生 >>标签派生
  32. <div id="h2id" class="h2class"><h2>1.蓝色</h2></div>
  33. <div           class="h2class"><h2>2.黄色</h2></div>
  34. <div                          ><h2>3.红色</h2></div>
  35. </body>
  36. </html>

css 之优先策略的更多相关文章

  1. css模块化策略

    为什么要模块化? 分治和复用 封装,不污染全局,不被全局污染. 继承 BEM(block:块,Element:元素,Modifier:修饰符)策略 .block__Element--Modifier ...

  2. CSS样式的特点与优先选择权

    CSS样式的特点:(子元素会继承父元素的某些样式,子元素有自己的样式就用自己的样式,没有的就用父元素的)      1.继承:              网页中子元素,将继承父元素的样式(比如要控制p ...

  3. css样式的优先顺序

    一.css样式的权重:!important(1000+) > 内联样式(  1000 ) > ID选择器(100 ) > 类选择器(10) > 标签选择器( 1 ) > ...

  4. 企业如何从“API优先”的策略中获益

    在过去的几年里,全球API经济在以难以置信的速度进行快速地增长.物联网.人工智能.自动驾驶等等众多令人充满期待的技术正蓬勃发展,这也证明了API对于如今整个技术圈子的重要性,也预示着在不久的将来它还将 ...

  5. 创建一个离线优先，数据驱动的渐进式 Web 应用程序

    原文地址:Build an offline-first, data-driven PWA 译文出自:我的个人博客 概述 在本文中,您将学习如何使用 Workbox 和 IndexedDB 创建离线优先 ...

  6. 2.Bootstrap CSS

    Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动 ...

  7. 你不知道的css各类布局（四）之响应式布局

    响应式布局 概念 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 布局特点 响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC.手机.手表.冰箱的Web浏览器等等)都能显示出令人满意的效 ...

  8. bootstrip CSS

    什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的.水平的)组成的结构(通常是二维的).它广泛应用于打印设计中的设计布局和内容结构.在网页设计中 ...

  9. [css]我要用css画幅画(七) - 哆啦A梦

    接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...

随机推荐

  1. delphi控件安装与删除

    附带通用控件安装方法:----------基本安装1.对于单个控件,Componet-->install component..-->PAS或DCU文件-->install;2.对于 ...

  2. Delphi XE5 for android 调用Java类库必看的文件

    C:\Program Files\Embarcadero\RAD Studio\12.0\source\rtl\android 的目录 Androidapi.AppGlue.pasAndroidapi ...

  3. EF 只更新部分字段

    /// 只更新storedAddress数据中的DefaultAddress字段,更新为false /// 将默认地址改为不是默认地址 /// </summary> /// <par ...

  4. asp.net mvc razor html encoding

    HTML Encoding 为了跨站点的脚本攻击,Razor 语法会直接将脚本代码编码输出. @{string message = "<script>alert('haacked ...

  5. 编译android程序时DEX过程出现错误

    今天编译高级设置时出现了错误,这好坑爹啊~ 于是我开始检查代码,发现代码没有错误啊,然后观察MAKE的步骤才发现是DEX时出现了问题!! 下面是错误的LOG: Information:Using ja ...

  6. Python判断是否是数字（无法判断浮点数）(已解决)

    s为字符串s.isalnum() 所有字符都是数字或者字母s.isalpha() 所有字符都是字母s.isdigit() 所有字符都是数字s.islower() 所有字符都是小写s.isupper() ...

  7. 多线程异步加载图片async_pictures

    异步加载图片 目标:在表格中异步加载网络图片 目的: 模拟 SDWebImage 基本功能实现 理解 SDWebImage 的底层实现机制 SDWebImage 是非常著名的网络图片处理框架,目前国内 ...

  8. iFreeThinking - 记录生活，分享思考

    http://www.ifreethinking.com iFreeThinking.com 是一个非营利性个人博客网站.开于 2014 年,博客主要记录分享一些思考和感悟. 文章列表:http:// ...

  9. android 下滤镜效果的实现

    android 下滤镜效果的实现 滤镜过滤颜色已实现,简单版本可通过下面代码的3个参数实现黑白.红.绿...等7种过滤(RGB的7种组合). 理论上讲可以过滤为任意颜色.调整混合结果的比值就行了. p ...

  10. 关于开始学习Leetcode的第一帖

    从明天开始,白天在实验室完成工作,晚上来图书馆换个环境去学习算法数据结构等计算机基础性的技能.在LeetCode这个平台上做题. 现在感觉自己在算法和数据机构这方面实在是太薄弱了,需要慢慢的捡起来来, ...