css优先级机制说明

首先说明下样式的优先级,样式有三种:

1. 外部样式(External style sheet)

示例:

<!-- 外部样式 bootstrap.min.css --><link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

2.内部样式(Internal style sheet)

示例:

复制代码
<head><style type="text/css"> /*内部样式*/ h1 {color:blue;} </style> </head>
复制代码

3.内联样式(Inline style)

示例:

<h1 style="color:blue">样式测试</h1>

虽然内联样式可以比较灵活的单独改变某一标签的样式,但还是建议尽量不要使用内联样式。因为这样做虽然更为直观,但不符合结构与表现分离的设计思想。

一般来说,以上三种样式的优先级如下:

内联样式>内部样式>外部样式

选择器的优先级:

选择器的种类可以分为三种,分别是:

1.标签名选择器  如 h1{}。

2.类选择器  如 .test{}。

3.ID选择器  如 #test{}。

同时还需要考虑到内联样式表,即在标签内写入style=""的方式。

在此我们用数字1000,100,10,1来表示上述三种选择器和内联样式表的权值,数字越大则权值越大,也就是优先级越高。

各个选择器的权值如下:

1.  内联样式表的权值最高,设为1000;

2.  ID 选择器的权值其次,设为 100

3.  Class 类选择器的权值第三,设为 10

4.  HTML 标签选择器的权值最低,设为 1

示例:

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* 内部样式 */ #blueP p { /* 权值 = 100+1=101 */ color:blue; } #blueP .red { /* 权值 = 100+10=110 */ color:red; } #blueP p span { /* 权值 = 100+1+1=102 */ color:yellow; } #blueP span { /* 权值= 100+1=101 */ color:black; } </style> </head> <body> <div id="blueP"> <p class="red">优先级测试 <span>优先级测试</span> </p> <p>优先级测试</p> </div> </body> </html>
复制代码

在火狐,IE10,Chrome浏览器页面显示结果如下:

<p class="red">标签内的内容显示为红色

<span>标签内的内容显示为黄色

最后一个<p>标签内的内容显示为蓝色

另外在同一组属性设置中标有“!important”规则的优先级最大,示例如下:

复制代码
<head><style type="text/css"> /*内部样式 */ #redp p { color:red !important; /* 优先级最大*/ color:blue; } </style> </head> <body> <div id="redp"> <p>!important测试</p> </div> </body> </html>
复制代码

在火狐,IE10,Chrome浏览器页面显示结果如下:

<p>标签里的内容显示为红色

其他补充:

1.选择器的权值越大优先级越高;

2.当权值相等时,后出现的样式表设置比先出现的样式表设置优先级高;

3.继承的CSS 样式优先级低于后来指定的CSS 样式

4.后代选择器和群组选择器是对标签名选择器、类选择器和ID选择器的扩展应用,在此就不介绍了。

转载于:https://www.cnblogs.com/EvanHao/p/learncss.html

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

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

相关文章

制作一个钟表

用EasyX制作的一个简易钟表&#xff0c;需设置字符集属性为多字节字符集。效果如下所示&#xff1a; GIF图会有些闪动&#xff0c;在实际中这种闪动几乎不可见。 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> #include<graphics.h> #include<math.h…

趣谈MySQL历史,以及MariaDB初体验

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;MySQL 是一个跨世纪的伟大产品&#xff0c;它最早诞生于 1979 年&#xff0c;距今已经有 40 多年的历史了&#xff0c;而如今…

网页设置页数/总页数_图书分配问题(分配最小页数)

网页设置页数/总页数Problem statement: 问题陈述&#xff1a; Given an array of integers A of size N and an integer B. College library has N bags, the ith book has A[i] number of pages. 给定一个大小为N的整数A和一个整数B的数组。 高校图书馆有N个书包&#xff0c…

算法图解:如何判断括号是否有效?

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;今天要讲的这道题是 bilibili 今年的笔试真题&#xff0c;也是一道关于栈的经典面试题。经过前面文章的学习&#xff0c;我想…

让人省心的事件委托

事件委托:利用冒泡的原理把实践添加到父元素级别上&#xff0c;触发执行效果。 时间委托优点&#xff1a; 1.提高性能&#xff0c;不用for循环遍历所有li&#xff0c;节省性能。 2.新添加的元素还会有原来之前的事件。 先看时间委托提高的性能吧&#xff0c;一个常…

Python HTMLCalendar类| 带有示例的formatyearpage()方法

Python HTMLCalendar.formatyearpage()方法 (Python HTMLCalendar.formatyearpage() Method) formatyearpage() method is an inbuilt method of the HTMLCalendar class of calendar module in Python. It works on HTMLCalendar class object and returns a years calendar a…

最新版MySQL在MacOS上的实践!

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;在 MacOS 上安装最新版的 MySQL 有三种方法&#xff1a;使用 Docker 安装&#xff1b;使用 Homebrew 运行 brew install mys…

二进制文件的操作

所有文件的存储其实质都是二进制的&#xff0c;二进制文件往往由两部分组成&#xff0c;一部分是文件头另一部分存放了文件的内容。文件头通常存放与文件格式有关的信息&#xff0c;以BMP等图象文件为例&#xff0c;它们的文件头中存放了是何种图形格式、图象大小、调色板等信息…

【转】GitHub入门详细讲解

第一&#xff1a;请登录https://windows.github.com/ 下载您需要的安装软件&#xff0c;进行安装。安装后桌面有&#xff1a;GitHub 和 Git Shell 第二&#xff1a; 申请一个帐号https://github.com/signup/free 帐号名字要记得清楚。 其他请参考 http://www.woiweb.net/github…

简易飞机空战小游戏

#include<stdio.h> #include<stdlib.h> #include<conio.h> #include<time.h> #include<windows.h>#define width 30 //屏幕的宽 #define high 40 //屏幕的高 #define EnemyAirportNum 5 //敌机出现的数量 #define MyFly 1 …

kotlin获取属性_Kotlin程序| 属性获取器和设置器方法的示例

kotlin获取属性属性获取器和设置器方法 (Properties Getter and Setter Methods) Variable having a class-level scope, declared inside the class body but outside the functions called property. 具有类级别范围的变量&#xff0c;在类主体内部但在称为属性的函数外部声明…

忘记MySQL密码怎么办?一招教你搞定!

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;在安装完 MySQL 或者是在使用 MySQL 时&#xff0c;最尴尬的就是忘记密码了&#xff0c;墨菲定律也告诉我们&#xff0c;如果…

vb读出二进制文件,合并两个文件

Dim FileMe() As Byte, File1() As Byte, File2() As Byte Dim Ii As Integer, Ss As String 读入程序自身 Open App.Path & "\" & App.EXEName & ".exe" For Binary As #11 ReDim FileMe(FileLen(App.Path & "\" & App.EXE…

通讯录动态版

#include<stdio.h> #include<stdlib.h> #include<string.h>enum operation {EXIT, //退出ADD, //添加SEARCH, //查找DELETD, //删除AMEND, //修改SHOW //显示 };enum object {X_NAME, //名字X_AGE, //年龄X_TELNUMBER,//电话号码X_ADDRESS //住址 };…

icmp消息类型报告传输_ICMP消息的类型和ICMP消息格式

icmp消息类型报告传输ICMP shares error reporting and devices status by messages. Messages created by ICMP are divided into 2 categories: ICMP通过消息共享错误报告和设备状态。 ICMP创建的消息分为两类&#xff1a; 1) Error Reporting Messages 1)错误报告消息 The…

一文详解「队列」,手撸队列的3种方法!

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;本文已收录至我的 Github《算法图解》系列&#xff1a;https://github.com/vipstone/algorithm前面我们介绍了栈&#xff08…

Oracle11完全卸载方法

一、在oracle11G以前卸载oracle会存在卸载不干净&#xff0c;导致再次安装失败的情况&#xff0c;在运行services.msc打开服务&#xff0c;停止Oracle的所有服务。二、 oracle11G自带一个卸载批处理\app\Administrator\product\11.2.0\dbhome_1\deinstall\deinstall.bat运行该批…

斐波拉切数列

问题陈述&#xff1a; Fibonacci为1200年代的欧洲数学家&#xff0c;在他的著作中曾经提到&#xff1a;若有一只兔子每个月生一只小兔子&#xff0c;一个月后小兔子也开始生产。起始只有一只兔子&#xff0c;一个月后就有两只兔子&#xff0c;二个月后有三只兔子&#xff0c;三…

自定义设置一个屏保程序

用C语言写一个简单的窗口程序&#xff0c;目的是生成一个可视化的图形窗口&#xff0c;需要用到EasyX库&#xff0c;可在文章末尾的网盘链接中下载。该程序退出需左击鼠标&#xff0c;否则无法退出。 #include<stdio.h> #include<stdlib.h> #include<windows.h…

JavaScript中带示例的字符串search()方法

字符串search()方法 (String search() Method) search() is method is a String method, it is used to check whether a substring exists in the given string or not. It returns the starting index of the substring from the string where substring exists. If substrin…