@rules具有多少特异性，例如@keyframes和@media？-css教程-PHP中文网

首页

web前端

css教程

@rules具有多少特异性，例如@keyframes和@media？

Christopher Nolan

Apr 18, 2025 am 11:34 AM

@规则（如@keyframes和@media）的特殊性究竟有多高？

最近有人问了我这个问题。我第一反应是：奇怪的问题！ 特殊性是关于选择器的，而@规则不是选择器，所以……无关紧要？

为了证明这一点，我们可以在@规则内部和外部使用相同的选择器，看看它是否会影响特殊性。

<code>body {
  background: red;
}
@media (min-width: 1px) {
  body {
    background: black;
  }
}</code>

背景是黑色。但是……这是因为媒体查询提高了特殊性吗？让我们交换一下顺序。

<code>@media (min-width: 1px) {
  body {
    background: black;
  }
}
body {
  background: red;
}</code>

背景是红色，所以不是。红色背景获胜只是因为它在样式表中靠后。媒体查询不影响特殊性。

如果感觉选择器正在提高特殊性并覆盖具有相同选择器的其他样式，则很可能只是因为它在样式表中靠后。

尽管如此，原始问题中的@keyframes让我开始思考。当然，关键帧可以影响样式。不是特殊性，但如果样式最终被覆盖，它可能会感觉像特殊性。

请看这个小例子：

<code>@keyframes winner {
  100% { background: green; }
}
body {
  background: red !important;
  animation: winner forwards;
}</code>

你可能会认为背景应该是红色的，尤其是在那里有!important规则的情况下。（顺便说一句，!important不影响特殊性；它是一个针对规则的事情。）在Firefox中它是红色的，但在Chrome中它是绿色的。所以这是一个需要注意的奇怪现象。（根据Estelle Weyl的说法，至少从2014年起就是一个bug。）

How much specificity do @rules have, like @keyframes and @media?

以上是@rules具有多少特异性，例如@keyframes和@media？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Laravel 教程

1601

PHP教程

1503

276

显示更多

Related knowledge

显示：内联，显示：块和显示：内联块之间有什么区别？ Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizontalpadding/margins—idealforinlinetextstyling

造型与CSS不同访问的链接 Jul 11, 2025 am 03:26 AM

设置访问过链接的样式能提升用户体验，尤其在内容密集型网站中帮助用户更好导航。1.使用CSS的:visited伪类可定义已访问链接样式，如颜色变化；2.注意浏览器出于隐私限制仅允许修改部分属性；3.颜色选择应与整体风格协调，避免突兀；4.移动端可能不显示该效果，建议结合其他视觉提示如icon辅助标识。

使用CSS剪辑路径创建自定义形状 Jul 09, 2025 am 01:29 AM

使用CSS的clip-path属性可以裁剪元素为自定义形状，如三角形、圆形缺口、多边形等，无需依赖图片或SVG。其优势包括：1.支持circle、ellipse、polygon等多种基本形状；2.可响应式调整，适配移动端；3.易于动画化，可结合hover或JavaScript实现动态效果；4.不影响布局流，仅裁剪显示区域。常见用法如圆形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意

如何使用CSS创建响应式图像？ Jul 15, 2025 am 01:10 AM

要使用CSS创建响应式图片，主要可通过以下方法实现：1.使用max-width:100%和height:auto让图片在保持比例的同时自适应容器宽度；2.结合HTML的srcset和sizes属性智能加载适配不同屏幕的图片源；3.利用object-fit和object-position控制图片裁剪与焦点展示。这些方法共同确保图片在不同设备上清晰、美观地呈现。

什么是常见的CSS浏览器不一致？ Jul 26, 2025 am 07:04 AM

不同浏览器对CSS解析存在差异，导致显示效果不一致，主要包括默认样式差异、盒模型计算方式、Flexbox和Grid布局支持程度及某些CSS属性行为不一致。1.默认样式处理不一致，解决方法是使用CSSReset或Normalize.css统一初始样式；2.旧版IE的盒模型计算方式不同，建议统一使用box-sizing:border-box；3.Flexbox和Grid在边缘情况或旧版本中表现有差异，应多测试并使用Autoprefixer；4.某些CSS属性行为不一致，需查阅CanIuse并提供降级

描述'不透明度”属性 Jul 15, 2025 am 01:23 AM

opacity是CSS中用于控制元素整体透明度的属性，取值范围为0（完全透明）到1（完全不透明）。1.常用于图片hover淡出效果，通过设置opacity过渡增强交互体验；2.制作背景遮罩层提升文字可读性；3.控制按钮或图标在禁用状态下的视觉反馈。需注意它会影响所有子元素，且与rgba不同，后者仅影响指定颜色部分。搭配transition可实现平滑动画，但频繁使用可能影响性能，建议结合will-change或transform使用。合理应用opacity能增强页面层次感和交互性，但应避免干扰用户

什么是口音色的物业？ Jul 26, 2025 am 09:25 AM

accent-color是CSS中用于自定义复选框、单选按钮和滑块等表单元素高亮颜色的属性；1.它直接改变表单控件选中状态的默认颜色，如将复选框的蓝色勾选标记改为红色；2.支持的元素包括type="checkbox"、type="radio"和type="range"的输入框；3.使用accent-color可避免复杂的自定义样式和额外DOM结构，保持原生可访问性；4.现代浏览器普遍支持，旧浏览器需降级处理；5.设置accent-col

描述`：has（）`pseudo-class（父挑选器） Jul 15, 2025 am 12:32 AM

The:has()pseudo-classinCSSallowstargetingaparentelementbasedonitschildelements.Itworksbyusingthesyntaxparent:has(child-selector)toapplystylesconditionally.Forexample,div:has(img)appliesstylestoadivcontaininganimage.Multipleselectorscanbeusedwithcomma

See all articles

@rules具有多少特异性，例如@keyframes和@media？

热AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题