首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS三种写法的优先级

作者：yun悠然_434 | 来源：互联网 | 2023-08-07 08:49
在HTML文件中引入CSS样式有三种方法：外部样式：通过link标签引入CSS样式；内页样式：写在HTML页面里面的styl

在HTML文件中引入CSS样式有三种方法&＃xff1a;

  1. 外部样式&＃xff1a;通过link标签引入CSS样式&＃xff1b;
  2. 内页样式&＃xff1a;写在HTML页面里面的style标签里面&＃xff1b;
  3. 行内样式&＃xff1a;写在对应标签的style属性里面。

我知道一般情况下使用外部样式&＃xff0c;减少代码冗余&＃xff0c;同时便于后期维护。但如果同时用三种方式引入相同的CSS样式&＃xff0c;谁的优先级更高呢&＃xff1f;

就做了个小测试&＃xff1a;

DOCTYPE html>
<html lang&＃61;"zh-CN">
<head>
<meta charset&＃61;"UTF-8"/>
<title>css样式优先级title>
<link href&＃61;"index.css" rel&＃61;"stylesheet" type&＃61;"text/css"/>
<style type&＃61;"text/css">
.box{background:red;border:1px solid black;width:100px;height:100px;
}
style>
head>
<body><div style&＃61;"background:yellow;width:100px;height:100px;" class&＃61;"box">div>
body>
html>

外部CSS样式代码&＃xff1a;

.box{width:100px;height:100px;background:blue;
}

  • 外部样式&＃xff1a;blue
  • 内页样式&＃xff1a;red
  • 行内样式&＃xff1a;yellow

最后显示的效果是&＃xff1a;

把行内CSS的背景样式去掉后&＃xff0c;显示&＃xff1a;

可见&＃xff0c;CSS三种位置写法的优先级是&＃xff1a;行内样式&＃xff1e;内页样式&＃xff1e;外部样式

 

感谢&＃64;我是攻城狮的提醒&＃xff0c;去认真看了CSS权重这个知识&＃xff0c;明白了自己是走了歧途。

从CSS代码存放位置看权重优先级&＃xff1a;内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之&＃xff0c;大部分情况下CSS代码都是使用外联样式表。

从样式选择器看权重优先级&＃xff1a;important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。

  • important的权重为1,0,0,0
  • ID的权重为0,1,0,0
  • 类的权重为0,0,1,0
  • 标签的权重为0,0,0,1
  • 伪类的权重为0,0,1,0
  • 属性的权重为0,0,1,0
  • 伪对象的权重为0,0,0,1
  • 通配符的权重为0,0,0,0
再分享一高质量篇博文。

id 的选择器为什么要这么写 li#first&＃xff1f;

一. 一个疑问&＃xff1f;

看到过一篇关于 CSS 的文章&＃xff0c;其中说到&＃xff1a;对于类似 li#first 这样的选择器&＃xff0c;由于使用 id 就已经可以确定元素了&＃xff0c;没有必要再写上前面的 li, 直接写上 #first 这样的 id 选择器就可以了。听起来说得不错&＃xff0c;简单测试一下也没有问题。

可是&＃xff0c;我们经常看到带有元素名称的选择器&＃xff0c;例如&＃xff0c;在微软的项目模板中就有大量的带有元素名称的选择器&＃xff0c;如果没有用的话&＃xff0c;为什么要这样写呢&＃xff1f;

ul#navlist
{float: right;
}ul#navlist li
{display: inline;
}

二. 问题出现了&＃xff01;

写一个简单的菜单&＃xff0c;使用 ul 和 li 实现&＃xff0c;菜单项之间使用边框来实现间隔线。

html 代码如下&＃xff1a;

按 Ctrl&＃43;C
按 Ctrl&＃43;C

使用下面的样式表&＃xff0c;首先通过为所有的超级链接增加一个左边框来画出间隔的虚线&＃xff0c;然后将第一个菜单项的左边框去掉&＃xff0c;我的第一个样式使用了 .first a。

ul#navlist li
{
    display: inline;
}
          
ul#navlist li a
{
    border-left: 1px dotted #8A8575;
    padding: 10px;
    margin-top: 10px;
    color: #8A8575;
    text-decoration: none;
    float: left;
}
          
.first a
{
    border: none;
}

 看一下效果&＃xff0c;完全没有反应。

还有的地方说 id 选择器的级别比较高&＃xff0c;那么将类改成 id 。

  将样式表也进行相应的修改。

#first a
{
    border: none;
}

 可是结果呢&＃xff1f;岿然不动&＃xff01;

用火狐的 firebug 看一看&＃xff0c;被忽略了。

三. 探源

为什么我的样式被秒杀了&＃xff1f;

网上有大量的文章&＃xff0c;但是说法并不一致&＃xff0c;有的说要考虑三个级别&＃xff0c;可是也有的说需要考虑四个级别&＃xff0c;但是总的方向大致是关于层叠的。

不如到 W3C 的网站上看一个究竟。相关的标准在 这个页面 可以看到&＃xff0c;目前为止的 CSS 标准有三个: CSS1, CSS2, 以及 CSS3。

CSS1 是最早的标准&＃xff0c;其中关于层叠顺序的描述在 这里&＃xff0c;还提供了一个简单的示例进行说明。

LI            {...}  /* a&＃61;0 b&＃61;0 c&＃61;1 -> specificity &＃61;   1 */
UL LI         {...}  /* a&＃61;0 b&＃61;0 c&＃61;2 -> specificity &＃61;   2 */
UL OL LI      {...}  /* a&＃61;0 b&＃61;0 c&＃61;3 -> specificity &＃61;   3 */
LI.red        {...}  /* a&＃61;0 b&＃61;1 c&＃61;1 -> specificity &＃61;  11 */
UL OL LI.red  {...}  /* a&＃61;0 b&＃61;1 c&＃61;3 -> specificity &＃61;  13 */
#x34y         {...}  /* a&＃61;1 b&＃61;0 c&＃61;0 -> specificity &＃61; 100 */

 

在 CSS1 中将优先级分为三组&＃xff0c;将 id 选择器作为 a 组&＃xff0c;类选择器作为 b 组&＃xff0c;元素名作为 c 组&＃xff0c;每组中出现一次&＃xff0c;计数一次&＃xff0c;按照先 a 组进行比较&＃xff0c;相同的情况下&＃xff0c;使用 b 组进行比较&＃xff0c;最后是 c 组。什么选择器的优先级别高&＃xff0c;什么选择器提供的样式有效。比如在上面的例子中&＃xff0c;第 5 组使用 id 的级别最高&＃xff0c;所以&＃xff0c;这组的样式设置生效&＃xff0c;而其他的设置将会被忽略掉。

CSS21 标准

在 CSS2 中&＃xff0c;又增加了关于行内说明 style 的组&＃xff0c;所以参与比较的组成为了 4 组&＃xff0c;其中 style 的优先级别最高。同样&＃xff0c;在 CSS2 的标准说明中也提供了样例。

*             {}  /* a&＃61;0 b&＃61;0 c&＃61;0 d&＃61;0 -> specificity &＃61; 0,0,0,0 */
 li            {}  /* a&＃61;0 b&＃61;0 c&＃61;0 d&＃61;1 -> specificity &＃61; 0,0,0,1 */
 li:first-line {}  /* a&＃61;0 b&＃61;0 c&＃61;0 d&＃61;2 -> specificity &＃61; 0,0,0,2 */
 ul li         {}  /* a&＃61;0 b&＃61;0 c&＃61;0 d&＃61;2 -> specificity &＃61; 0,0,0,2 */
 ul ol&＃43;li      {}  /* a&＃61;0 b&＃61;0 c&＃61;0 d&＃61;3 -> specificity &＃61; 0,0,0,3 */
 h1 &＃43; *[rel&＃61;up]{}  /* a&＃61;0 b&＃61;0 c&＃61;1 d&＃61;1 -> specificity &＃61; 0,0,1,1 */
 ul ol li.red  {}  /* a&＃61;0 b&＃61;0 c&＃61;1 d&＃61;3 -> specificity &＃61; 0,0,1,3 */
 li.red.level  {}  /* a&＃61;0 b&＃61;0 c&＃61;2 d&＃61;1 -> specificity &＃61; 0,0,2,1 */
 #x34y         {}  /* a&＃61;0 b&＃61;1 c&＃61;0 d&＃61;0 -> specificity &＃61; 0,1,0,0 */
 style&＃61;""          /* a&＃61;1 b&＃61;0 c&＃61;0 d&＃61;0 -> specificity &＃61; 1,0,0,0 */

"x97z" style&＃61;"color: green">

 

在这个示例中&＃xff0c;style 的优先级别最高&＃xff0c;所以将会覆盖掉通过 id 进行的设置&＃xff0c;颜色为绿色。

四. 解决问题

通过上面的分析可以看到&＃xff0c;仅仅提供选择器并不足以能够生效&＃xff0c;还要看选择器的优先级别&＃xff0c;在我们的问题中&＃xff0c;即使使用 id 来选择第一个菜单项&＃xff1a;#first a &＃xff0c;包括了一个 id 和一个元素名&＃xff0c;那么所得的优先级别为&＃xff1a;

a&＃61;0, b&＃61;1, c&＃61;0, d&＃61;1

可是&＃xff0c;通用的选择器是这样的&＃xff1a;ul#navlist li a&＃xff0c;优先级中却包括了一个 id, 还有 3 个元素名称&＃xff0c;所以优先级别为&＃xff1a;

a&＃61;0, b&＃61;1, c&＃61;0, d&＃61;3

所以我们的选择器没有比过通用的选择器&＃xff0c;悲剧发生了&＃xff01;

知道了原因&＃xff0c;问题也就简单了&＃xff0c;提高我们选择器的优先级别&＃xff0c;超过通用选择器的优先级就可以了&＃xff0c;比如&＃xff0c;我们可以写成这样&＃xff1a;

ul#navlist li#first a

 

现在的优先级是多少呢&＃xff1f;

a&＃61;0, b&＃61;2, c&＃61;0, d&＃61;3

在 b 组比较的时候就已经超过了&＃xff0c;看看是否已经成功了&＃xff01;

还可以加上重要性说明&＃xff0c;也可以解决。!important 必须写在样式与分号之间&＃xff0c;每个样式必须单独声明。

#first a
{
    border: none !important;
}

 看来选择器不是那么简单呀&＃xff01;


------------------------

感谢司徒正美的奉献&＃xff0c;转载地址&＃xff1a;http://www.cnblogs.com/rubylouvre/archive/2012/09/26/2524700.html



推荐阅读
  • spring

    Spring源码解密之默认标签的解析方式分析

    Spring源码解密之默认标签的解析方式分析
    本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断，区分默认命名空间和自定义命名空间，并采用不同的解析方式。其中，bean标签的解析最为复杂和重要。 ... [详细]
  • get

    获取当前模块所在路径的GetModuleFileName函数用法详解

    本文详细介绍了GetModuleFileName函数的用法，该函数可以用于获取当前模块所在的路径，方便进行文件操作和读取配置信息。文章通过示例代码和详细的解释，帮助读者理解和使用该函数。同时，还提供了相关的API函数声明和说明。 ... [详细]
  • post

    Linux重启网络命令实例及关机和重启示例教程

    Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例，以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法，以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • get

    android listview OnItemClickListener失效原因

    android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]
  • match

    《数据结构》学习笔记3——串匹配算法性能评估

    《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • char

    PHPMailer邮件类邮件发送功能的使用教学及注意事项

    PHPMailer邮件类邮件发送功能的使用教学及注意事项
    本文介绍了使用国外开源码PHPMailer邮件类实现邮件发送功能的简单教学，同时提供了一些注意事项。文章涵盖了字符集设置、发送HTML格式邮件、群发邮件以及避免类的重定义等方面的内容。此外，还提供了一些与PHP相关的资源和服务，如传奇手游游戏源码下载、vscode字体调整、数据恢复、Ubuntu实验环境搭建、北京爬虫市场、进阶PHP和SEO人员需注意的内容。 ... [详细]
  • post

    南邮ctf-web的writeup

    本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • post

    在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板

    在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板
    本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤，包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读，读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]
  • select

    MyBatis多表查询与动态SQL使用

    MyBatis多表查询与动态SQL使用
    本文介绍了MyBatis多表查询与动态SQL的使用方法，包括一对一查询和一对多查询。同时还介绍了动态SQL的使用，包括if标签、trim标签、where标签、set标签和foreach标签的用法。文章还提供了相关的配置信息和示例代码。 ... [详细]
  • select

    关于cuowu类的错误提示和使用AdjustmentListener的问题

    本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]
  • ip

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • ip

    CF：3D City Model（小思维）问题解析和代码实现

    CF：3D City Model（小思维）问题解析和代码实现
    本文通过解析CF：3D City Model问题，介绍了问题的背景和要求，并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景，每个网格单元可以作为建筑的基础，建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路，并给出了相应的代码实现供读者参考。 ... [详细]
  • ip

    HDFS2.x新特性

    HDFS2.x新特性
    一、集群间数据拷贝scp实现两个远程主机之间的文件复制scp-rhello.txtroothadoop103:useratguiguhello.txt推pushscp-rr ... [详细]
  • 数组

    [大整数乘法] java代码实现

    [大整数乘法] java代码实现
    本文介绍了使用java代码实现大整数乘法的过程，同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率，并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]
  • 数组

    Java项目管理工具及配置教程推荐

    本文介绍了一些Java开发项目管理工具及其配置教程，包括团队协同工具worktil，版本管理工具GitLab，自动化构建工具Jenkins，项目管理工具Maven和Maven私服Nexus，以及Mybatis的安装和代码自动生成工具。提供了相关链接供读者参考。 ... [详细]
author-avatar
yun悠然_434
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有