草庐IT

【CSS】CSS样式的优先级

厦门德仔 2023-08-23 原文

CSS样式的优先级

CSS样式的优先级

对于相同CSS起源来说，不同位置的样式其优先级也是不同的。一般来说，行内样式会优先于内嵌样式表，内部样式表会优先于外部样式表。而被附加了！important关键字的声明会拥有最高的优先级。
在实际开发中，如果作者设计网页字体颜色为14号黑色字体，而用户在浏览器里利用火狐浏览器的插件firebug修改页面字体为18号字体，那么浏览器该如何处理呢？
根据CSS层叠规则：作者设计的样式能够覆盖浏览器默认设置的样式，而用户在浏览器设置的样式可以覆盖作者的样式。同时,CSS根据样式的远近关系来决定层叠样式的优先级：在同等条件下，距离运用对象的距离越近就有较大的优先权，因而行内样式大于内部样式和外部样式。

如果多个不同类型的选择器同时为一个对象设置样式，该对象将如何显示最终样式呢？以下给出一个简单的计算方法。对于常规选择器，它们都拥有一个优先级加权值

  • 标签选择器：优先级加权值为1
  • 伪元素或伪对象选择器：优先级加权值为1
  • 类选择器：优先级加权值为10
  • 属性选择器：优先级加权值为10
  • ID选择器：优先级加权值为100
  • 其他选择器：优先级加权值为0，如通配选择器等
    然后，以下面加权值数为起点来计算每个样式中选择器的总加权值数。计算的规则是：
  • 统计选择器中ID选择器的个数，然后乘以100
  • 统计选择器中类选择器的个数，然后乘以10
  • 统计选择器中的标签选择器的个数，然后乘以1

以此方法类推，最后把所哟有加权值数相加，即可得到当前选择器的总加权值，最后根据加权值来决定哪个样式的优先级大
对于由多个选择器组合而成的复合选择器，首先分别计算每个组成选择器的加权值，接着相加得出当前选择器的总分，最后根据选择器的分值大小，分值越高则优先级越高，那么就将应用它所设置的样式，如果分值相同，则根据位置关系来判断，越靠越近对象的样式就拥有越高的优先级。

            h3{color: #ff7300;}                        /*加权值=1分 */
            .f14{font-size: 14px;}                       /*加权值=10分 */
            #head{width: 960px;}                         /*加权值=100分 */
            h3 .f14{font-weight: bold;}                  /*加权值=1分+10分=11分 */
            #head h2{border: 1px solid #ff73;}         /*加权值=100分+1分=101分 */
            div p{padding: 0 10px;}                      /*加权值=1分+1分=2分 */
            div #head{margin: 0 auto;}                   /*加权值=1分+100分=101分 */
            #head h2 span{float: right;}                 /*加权值=100分+1分+1分=102分 */
            #head .f14 em{float: right;}                 /*加权值=100分+10分+1分=111分 */
            #head .f14 span em{float: right;}            /*加权值=100分+10分+1分+1分=112分 */
            #head div h2 .f12 span em{color: #000;}    /*加权值=100分+1分+1分+10分+1分+1分=114分 */
CSS样式spanclasstokencss3前端

有关【CSS】CSS样式的优先级的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  3. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  4. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  5. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  6. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  7. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  8. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  9. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  10. ruby - 如何在 Ruby 中使用 "fake"C# 样式属性？ - 2

    编辑:我稍微更改了规范，以更好地符合我的想象。好吧，我真的不想伪造C#属性，我想将它们合而为一并支持AOP。给定程序:classObjectdefObject.profile#magiccodehereendendclassFoo#Thisisthefakeattribute,itprofilesasinglemethod.profiledefbar(b)putsbenddefbarbar(b)puts(b)endcomment("thisreallyshouldbefixed")defsnafu(b)endendFoo.new.bar("test")Foo.new.barbar("t

随机推荐