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>
css 之优先策略的更多相关文章
- css模块化策略
为什么要模块化? 分治和复用 封装,不污染全局,不被全局污染. 继承 BEM(block:块,Element:元素,Modifier:修饰符)策略 .block__Element--Modifier ...
- CSS样式的特点与优先选择权
CSS样式的特点:(子元素会继承父元素的某些样式,子元素有自己的样式就用自己的样式,没有的就用父元素的) 1.继承: 网页中子元素,将继承父元素的样式(比如要控制p ...
- css样式的优先顺序
一.css样式的权重:!important(1000+) > 内联样式( 1000 ) > ID选择器(100 ) > 类选择器(10) > 标签选择器( 1 ) > ...
- 企业如何从“API优先”的策略中获益
在过去的几年里,全球API经济在以难以置信的速度进行快速地增长.物联网.人工智能.自动驾驶等等众多令人充满期待的技术正蓬勃发展,这也证明了API对于如今整个技术圈子的重要性,也预示着在不久的将来它还将 ...
- 创建一个离线优先，数据驱动的渐进式 Web 应用程序
原文地址:Build an offline-first, data-driven PWA 译文出自:我的个人博客 概述 在本文中,您将学习如何使用 Workbox 和 IndexedDB 创建离线优先 ...
- 2.Bootstrap CSS
Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动 ...
- 你不知道的css各类布局（四）之响应式布局
响应式布局 概念 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 布局特点 响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC.手机.手表.冰箱的Web浏览器等等)都能显示出令人满意的效 ...
- bootstrip CSS
什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的.水平的)组成的结构(通常是二维的).它广泛应用于打印设计中的设计布局和内容结构.在网页设计中 ...
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
随机推荐
- pandas聚合和分组运算——GroupBy技术(1)
数据聚合与分组运算——GroupBy技术(1),有需要的朋友可以参考下. pandas提供了一个灵活高效的groupby功能,它使你能以一种自然的方式对数据集进行切片.切块.摘要等操作.根据一个或多个 ...
- java-testng-selenium优化
由于项目中webui测试的需要,是用testng+selenium的方式,其中遇到过几个问题,记录下,方便以后查看 1.重复运行多次case 因为是selenium,所以有的时候需要运行多次,方法是写 ...
- WPF学习03：Element Binding
元素绑定是数据绑定的一个子集,关于数据绑定是什么,园子里有很多文章都说得非常好,在此不予详细说明. WPF实现了完善的数据绑定机制,使得元素绑定有简易的实现步骤. 本文的元素指的是WPF中的可视控件. ...
- 【PHP】PHP中的类与对象
面向对象并不是PHP的关键,但PHP确实能很好的支持面向对象编程,而且类与对象也成为了PHP5的核心组成部分.PHP的面向对象特性让构建大型的复制应用成为可能,有了类与对象,就自然产生了各种编程范式和 ...
- this的使用方法
当一个对象创建后,Java虚拟机(JVM)就会给这个对象分配一个引用自身的指针,这个指针的名字就是this.this是指向对象本身的一个指针.this只和特定的对象关联,而不和类关联,同一个类的不同对 ...
- Swing基础
Swing基础 JFrame JPanel 绘图:paint 监听事件: ActionListener KeyListener Listener和Adapter 计时器:Timer Time ...
- 自己的php函数库
//判断数组中是否有元素为空的函数,支持多维数组,相似系统函数in_array(value,array,type) function is_null_array($arr) { if(!is_arra ...
- Virtual Box + CentOS Minimal + Apache搭建Web服务器
本文并不介绍关于Virtual Box, CentOS, Apache的安装, 主要针对安装后相关的配置, 使宿主机(Host)可以访问客户机(Guest: CentOS in Virtual Box ...
- Eclipse基金会
昨天Eclipse基金会庆祝其成立十周年.2004年2月的新闻稿宣布该非盈利组织的正式成立,由包括开发者.消费者和插件提供商在内的各独立团体组成的董事会,为Eclipse的长期发展负责. 基金会成立时 ...
- Linux C 文件与目录4 将缓冲区数据写入磁盘
将缓冲区数据写入磁盘 所谓缓冲区,是Linux系统对文件的一种处理方式.在对文件进行写操作时,并没有立即把数据写入到磁盘,而是把数据写入到缓冲区.如果需要把数据立即写入到磁盘,可以使用sync函数.用 ...