css html5360百科,div+css

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pseudo-class)和属*(attribute)选择符 > 类别(type),伪对象(pseudo-element)

一,解释:

*内联样式(inline style):元素的style属*,比如

*ID选择符:元素的id属*,比如

*类选择符:比如

*伪类(pseudo-class):最常见的是锚(a)伪类,比如a:link,a:visited.

*属性选择符(attribute selectors):比如div[class=demo],含有class为demo的div元素

*类别选择器(type selector):HTML标签选择,比如div .demo,div元素下含有class为demo的元素

*伪对象选择器(pseudo-element selector):比如div:first-letter,div元素下的第一个单词。

多重CSS样式定义,属性追加重复最后优先原则

一个标签可以同时定义多个class,也可以是同一个class中重复定义属性。例如:

我们先定义两个样式

.one{width:200px;background:url(images/imgA.jpg) no-repeat left top;}

.two{border:10px solid #000; background:url(images/imgB.jpg) no-repeat left top;}

在页面代码中,我们可以这样调用:

这样最终的显示效果是这个div样式是什么呢??重复的是以哪一个为准呢??

width:200px;

border:10px solid #000;

background:url(images/imgB.jpg) no-repeat left top;

因为,当应用两个或多个样式时,浏览器所应用的样式根据是属性追加重复最后优先原则

就是说两个或多个或重复的样式名定义,浏览器所应用的样式是按先后顺序的,如果定义了重复的属性值,以最后定义的为准,如果应用了两个或多个样式名,里面不重复定义的

属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。

二、CSS的调用

页面内嵌法:就是将样式表直接写在页面代码的head区。类似这样:

外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

"@import"命令方法:类以下代码,

本人推荐使用第二种调用方法(外部调用法)

优先规则

既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个"规则"就是本次所需要讲的重点。

样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

1、统计选择符中的ID属性个数。

2、统计选择符中的CLASS属性个数。

3、统计选择符中的HTML标记名个数。

最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数(css2.1是用4位数表示)。( 注意,你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

例如:

1、每个ID选择符(#someid),加 0,1,0,0。

2、每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。

3、每个元素或伪元素(:firstchild)等,加0,0,0,1。

4、其它选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/405509.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring学习(10)--- @Qualifier注解

按类型自动装配可能多个bean实例的情况,可以使用Spring的Qualifier注解缩小范围(或指定唯一),也可以指定单独的构造器参数或方法参数可用于注解集合类型变量例子: package com.mypackage;import org.springframework.b…

NB模组基本AT指令

1、终端开机命令 ATCFUN0 2、查询软件版本号 ATCGMR 3、查询设备号 ATCGSN1 4、设置设备号 ATNTSETID1,xxxxx 5、设置IOM南向地址 ATNCDPxx.xx.xx.xx 6、设置APN ATCGDCONT1,"IP","xxxx" 7、复位 ATNRB 8、开机 ATCFUN1 9、查询sim卡imsi …

标准SQL注入入侵语句

1.判断有无注入点; and 11 and 12 2.猜表一般的表的名称无非是admin adminuser user pass password 等..and 0<>(select count(*) from *)and 0<>(select count(*) from admin) ---判断是否存在admin这张表3.猜帐号数目 如果遇到0< 返回正确页面 1<返回错误页…

字符编码·ISO8859

From: http://hanwei0143.blog.163.com/blog/static/5192699320071039342262/ 1&#xff0e; 名称的由来 ISO 8859&#xff0c;全称ISO/IEC 8859&#xff0c;是国际标准化组织(ISO)及国际电工委员会(IEC)联合制定的一系列8位字符集的标准&#xff0c;现时定义了15个字符集。 …

友讯(d-link)dwa-525 150m无线台式计算机网卡,D-Link新款台式机无线网卡即将上市

D-Link&#xff0c;日前发布了一款新型wireless N 150M台式机无线网卡——DWA-525。据D-Link中国产品负责人透露&#xff0c;该款网卡在大陆也即将上市&#xff0c;具体上市时间表请广大用户留意官方网站公告以及就近咨询各地经销商。DWA-525是一款单天线wireless N 台式机无线…

寒冰王座(完全背包+多解)

欢迎“热爱编程”的高考少年——报考杭州电子科技大学计算机学院 寒冰王座 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 12875 Accepted Submission(s): 6548 Problem Description不死族的巫妖王发工资拉,死…

深度学习--Matlab使用LSTM长短期记忆网络对负荷进行预测

一、LSTM描述 长短期记忆网络&#xff08;LSTM&#xff0c;Long Short-Term Memory&#xff09;是一种时间循环神经网络&#xff0c;是为了解决一般的RNN&#xff08;循环神经网络&#xff09;存在的长期依赖问题而专门设计出来的&#xff0c;所有的RNN都具有一种重复神经网络…

计算机桌面怎么全屏显示,电脑显示器如何设置成满屏

在有些时候我们的网友不清楚电脑显示器如何设置成满屏&#xff0c;那么下面就由学习啦小编来给你们说说电脑显示器设置成满屏的方法吧&#xff0c;希望可以帮到你们哦!电脑显示器设置成满屏的方法&#xff1a;右击桌面&#xff0c;选择弹出对话框中的【屏幕分辨率】如下图。弹出…

“优势”三说

故事1 朋友的朋友&#xff0c;极具预言天赋。留学国外多年&#xff0c;精通英语、日语、法语、德语、西班牙语&#xff0c;甚至对阿拉伯语和俄语也颇有造诣。做了若干年海外游子之后&#xff0c;看到祖国的日新月异&#xff0c;毅然决定回国发展。他自己认为&#xff0c;就凭着…

Matlab中求数据概率分布的方法

一、问题描述 对已有的一些列数据进行分析&#xff0c;想得到该数据的分布和统计特性&#xff0c;如概率密度函数&#xff0c;概率分布&#xff0c;累计概率密度等等。 例如&#xff0c;已有一段时间的声音测量数据&#xff0c;求该数据的分布特性&#xff0c;并给出噪声的95…

gvim同时处理中日韩文

From: http://xbeta.info/gvim-unicode.htm 一、两项要点 gvim处理多国文字(unicode)有两项要点&#xff1a;一是编码环境&#xff1a;set encutf-8&#xff1b;二是正确的字体&#xff0c;比如要正确显示韩文可选择GulimChe、DotumChe字体。 上图中9-12行字符未能正常显示&a…

获取浏览器可视区域、屏幕的宽和高

document.documentElement.clientWidth&#xff1a;取得浏览器页面可视区域的宽度document.documentElement.clientHeight&#xff1a;取得浏览器页面可视区域的高度screen.width&#xff1a;取得屏幕宽度screen.height&#xff1a;取得屏幕高度screen.availWidth&#xff1a;取…

matlab设置plot图像尺寸大小、坐标轴等

Matlab作为工程中的数据可视化工具是非常的方便的。但是在具体的生成过程中通常会遇见以下几个比较常见的问题&#xff0c;这里以我最近在写论文中用图遇到的问题作为例子。简要说明输出图像大小位置规范的重要性。 1&#xff1a;colorbar的位置大小范围不一致、不合理 2&#…

Microsoft Windows SDK for Windows 7 and .NET Framework 3.5 SP1 (ISO)

Microsoft Windows SDK for Windows 7 and .NET Framework 3.5 SP1 (ISO) http://www.microsoft.com/downloads/en/details.aspx?FamilyID71deb800-c591-4f97-a900-bea146e4fae1&displaylangen转载于:https://www.cnblogs.com/joshuali/archive/2011/03/22/4339226.html

计算机基础知识excle,职称计算机基础知识:Excel工作表的复制

(1)在工作簿内部复制1)鼠标拖曳法将鼠标指针指向被复制的工作表标签&#xff0c;按下Ctrl键&#xff0c;按下鼠标&#xff0c;此时鼠标指针变成内含“十”字形的表的图标&#xff0c;同时旁边的黑色倒三角用以指示工作表的复制位置。沿着标签区域拖动鼠标到达复制点后释放鼠标&…

Makefile中 变量赋值含义

From: http://hi.baidu.com/linuxking/item/aab87527ac88550a76272c91 作者联系方式&#xff1a;李先静 <xianjimli at hotmail dot com> 在Makefile中&#xff0c;对变量的赋值&#xff0c;有好几种方式&#xff0c;它们的意义、使用的场合都各不相同&#xff0c;初…