草庐IT

CSS优先级-权重叠加计算

诸葛青 2023-03-28 原文
• 先上总结: a. 说明: i. 公式: (行内, Id, 类, 标签) ii. 规则: 从左至右依次做个数上的比较, 如果同级数量一致, 则比较下一级个数, 直到某一级数量不一致, 则数量较大的一方选择器的优先级较高, 后面的数量就无需比较了。 如选择器1 (0, 0, 1, 0), 选择器2 (0, 0, 0, 3), 那么选择器1的优先级高于选择器2。如果所有的数值都一致的话, 说明两选择器相同, 那就依据css层叠性的特点. 浏览器会选择后一个选择器 b. 备注: i. 权重叠加计算不是正常的加法计算, 不需要逢十进一。 如标签是11 类是0 那么只可以是 (0, 0, 0 , 11), 不能是(0, 0, 1, 1) ii. * 通配符没有权重 iii. 无论父标签用了什么选择器并设置了什么样式, 对子标签来说都是继承, 继承的优先级永远是最低的。 • 准备: 先添加一段html代码

这是一个段落

之后为了能更好地查看结果, 设置点字体样式, 由于咱代码简单, 就使用一个通配符选择器设置样式 * { font-family: 楷体; font-size: 60px; } • 代码示例说明: 1. 同级数量的比较 a. 先写一个p标签选择器, 运行一下效果 /* （0, 0, 0, 1） */ p { color: blue; } b. 再写一个后代选择器如下, 再运行一下效果 /* (0, 0, 0, 2) */ div p { color: aqua; }由于后者标签数量高于前者标签数量, 所以后者选择器高 建议: 可以把b步骤的代码放在a步骤的前面 ,这样可以更好地体现优先级的关系(优先级是没有层叠性的特点), 可以更好地排除层叠性的可能(虽然根本就没这可能, 只是方便理解), 以下示例皆是如此 2. 不同级别的比较 a. 设计一个类构造器 /* (0, 0, 1, 0) */ .son { color: darkslategray; } b. 在p标签上加上类选择器

这是一个段落

由于类级别比标签高, 所以.son 选择器的优先级别高于div p选择器 3. 统配符没有权重的问题 首先优先级是没有层叠性的特点的, 这个在建议中也有描述。 其次咱可以假设它具备权重, 那样的话它就不会有层叠行的效果 a. 先写一个p标签选择器, 样式和之前的一样 p { color: blue; } b. 之后在它的后面写一个* p选择器 * p { color: yellowgreen; } 查看效果是文字的颜色是yellowgreen。 c. 接下来把* p选择器的代码放在p选择器之上， 再运行 这时候会发现字体颜色由原来的yellowgreen变为了blue。这就说明它并没有体现优先级, 而是体现出了层叠性的效果, 所以说通配符在权重叠加计算中没有任何权重 • 示例代码: 以下是我的实例代码, 请参考 Document

这是一个段落

• 备注: 头回写博客,如有写的不好或是有问题, 还请多多指教多多担待, 如有问题或是建议, 欢迎评论区里留言
CSS优先级color层叠rgbaHtml/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-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间，其中100是最大分数。计算平均分并将字母等级作为字符串返回，即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join，

  3. 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

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  5. ruby - 如何计算 Liquid 中的变量 +1 - 2

    我对如何计算通过{%assignvar=0%}赋值的变量加一完全感到困惑。这应该是最简单的任务。到目前为止，这是我尝试过的:{%assignamount=0%}{%forvariantinproduct.variants%}{%assignamount=amount+1%}{%endfor%}Amount:{{amount}}结果总是0。也许我忽略了一些明显的东西。也许有更好的方法。我想要存档的只是获取运行的迭代次数。 最佳答案 因为{{incrementamount}}将输出您的变量值并且不会影响{%assign%}定义的变量，我

  6. ruby - 使用 Ruby，计算 n x m 数组的每一列中有多少个 true 的简单方法是什么？ - 2

    给定一个nxmbool数组:[[true,true,false],[false,true,true],[false,true,true]]有什么简单的方法可以返回“该列中有多少个true？”结果应该是[1,3,2] 最佳答案 使用转置得到一个数组，其中每个子数组代表一列，然后将每一列映射到其中的true数:arr.transpose.map{|subarr|subarr.count(true)}这是一个带有inject的版本，应该在1.8.6上运行，没有任何依赖:arr.transpose.map{|subarr|subarr.in

  7. arrays - 计算数组中的匹配元素 - 2

    给定两个大小相等的数组，如何找到不考虑位置的匹配元素的数量？例如:[0,0,5]和[0,5,5]将返回2的匹配项，因为有一个0和一个5共同；[1,0,0,3]和[0,0,1,4]将返回3的匹配项，因为0有两场，1有一场；[1,2,2,3]和[1,2,3,4]将返回3的匹配项。我尝试了很多想法，但它们都变得相当粗糙和令人费解。我猜想有一些不错的Ruby习惯用法，或者可能是一个正则表达式，可以很好地回答这个解决方案。 最佳答案 您可以使用count完成它:a.count{|e|index=b.index(e)andb.delete_at

  8. 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

  9. 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:

  10. 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

随机推荐