css 之优先策略

Html代码

<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代码

<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 之优先策略

时间： 2024-10-09 15:05:50

css 之优先策略的相关文章

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

CSS样式的特点:(子元素会继承父元素的某些样式,子元素有自己的样式就用自己的样式,没有的就用父元素的) 1.继承: 网页中子元素,将继承父元素的样式(比如要控制p标签中的文字大小,可以直接给body标记添加样式) 2.层叠: 网页中子元素定义了与父元素相同的样式,则子元素的样式将覆盖父元素的样式后面的样式会覆盖前面的样式 1 <!DOCTYPE html PUBLIC "

Bootstrap CSS 一.Bootstrap CSS概览移动设备优先移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一样了,Bootstrap 3 默认的 CSS 本身就对移动设备友好支持. Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备.这实际上是一个非常及时的转变,因为现在越来越多的用户使用移动设备. 为了让 Bootstrap

CSS学习总结1

1. 文字的水平居中将一段文字置于容器的水平中点,只需设置text-align特点即可: text-align:center;2. 容器的水平居中先为该容器设置一个清晰宽度,然后将margin的水平值设为auto即可. div#container { width:760px; margin:0 auto; }3. 文字的笔直居中单行文字的笔直居中,只需将行高与容器高设为持平即可.比方,容器中有一行数字. 1234567890然后CSS这么写: div#container {height: 35p

[JavaWeb基础] 028.CSS简介和基础语法

css 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 css 的优先顺序浏览器缺省设置外部样式表内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) css 的基础语法代码结构颜色的写法 p { color

CSS样式选择器优先级

原文:CSS样式选择器优先级 CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class类选择器的数量.4.d为类型选择器的数量5.属性选择器,伪类选择器和class类选择器优先级一样,伪元素选择器和类型选择器一样6.!important 权重最高,比 inline style 还要高. 例如: 选择器特殊性 (a,b,c,d) Style= ”” 1,

让IE和Firefox兼容的CSS技巧集合css hack

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不

分布式环境中的负载均衡策略

在分布式系统中相同的服务常常会部署很多台,每一台被称为一个服务节点(实例).通过一些负载均衡策略将服务请求均匀地分布到各个节点,以实现整个系统支撑海量请求的需求.本文描述一些简单的负载均衡策略. Round-robin 简单地轮询.记录一个选择位置,每次请求来时调整该位置到下一个节点: curId = ++curId % nodeCnt 随机选择随机地在所有节点中选择: id = random(nodeCnt); 本机优先访问后台服务的访问者可能本身是一个整合服务,或者是一个proxy,如果

python学习笔记——爬虫的抓取策略

1 深度优先算法 2 广度/宽度优先策略 3 完全二叉树遍历结果深度优先遍历的结果:[1, 3, 5, 7, 9, 4, 12, 11, 2, 6, 14, 13, 8, 10] 广度优先遍历的结果:[1, 3, 2, 5, 4, 6, 8, 7, 9, 12, 11, 14, 13, 10] 4 实践中怎么来组合爬取策略 (1)一般来说,重要的网页距离入口站点的距离很近: (2)广度/宽度优先有利于多爬虫并行进行合作: (3)可以考虑将深度与广度/宽度相结合的方式来实现抓取的策略:优先考虑广

入门须知之网络爬虫的基本流程及抓取策略

大数据时代下,数据采集推动着数据分析,数据分析推动发展.但是在这个过程中会出现很多问题.拿最简单最基础的爬虫采集数据为例,过程中就会面临,IP被封,爬取受限.违法操作等多种问题,所以在爬去数据之前,一定要了解好预爬网站是否涉及违法操作,找到合适的代理IP访问网站等一系列问题. 掌握爬虫技术也成为现在技术流的营销推广人员必须掌握的.爬虫入门,这些知识你必须了解. 一.网络爬虫的基本工作流程如下: 1.首先选取一部分精心挑选的种子URL:2.将这些URL放入待抓取URL队列:3.从待抓取URL队列中