css-specificity 相关问题

请参阅 https://fresh-rfui-test.deno.dev/islands 上“打开模式”下方和右侧的“显示”按钮。我有：请参阅 https://fresh-rfui-test.deno.dev/islands 上“打开模式”下方和右侧的“显示”按钮。我有： <button type="button" class="bg-neutral-50 px-2">Show</button> 和两个样式表： <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>fresh-rfui-test</title> <link rel="stylesheet" href="https://rfui.deno.dev/rfui-v0-1-11.css" /> <link rel="stylesheet" href="/styles.css" /> </head> <body> <Component /> </body> </html> rfui-v0-1-11.css 先于 styles.css。 styles.css有： [type=button], [type=reset], [type=submit], button { -webkit-appearance:button; background-color:transparent; background-image:none } 因此，background-color 被设置为 transparent。但是rfui-v0-1-11.css有： .bg-neutral-50 { --tw-bg-opacity:1; background-color:rgb(var(--color-neutral-50)/var(--tw-bg-opacity)) } 我不明白为什么该选择器不优先，为什么它的值 background-color 不被应用。这就是我的想法。我参考这些文档了解级联顺序。对于“1. 相关性”，两个选择器都与 <button> 匹配，因此不会被过滤掉。对于“2.起源和重要性”，它们都是相同的。两者都有“作者（开发者）”的起源和“正常”的重要性。对于“3.特异性”，.bg-neutral-50比[type=button]具有更高的特异性。 0-1-0 vs 0-0-1。那么，.bg-neutral-50 应该优先并应用 background-color 的值。您链接到的文档说： CLASS栏目包括类选择器，例如.myClass、属性像 [type="radio"] 和 [lang|="fr"] 这样的选择器，以及伪类，例如 :hover、:nth-of-type(3n) 和 :required。 .bg-neutral-50和[type=button]都属于这一类，因此两个选择器的特异性都是0-1-0。通过将鼠标悬停在选择器上可以在 Safari 开发工具中看到这一点：

css css-specificity

回答 1 投票 0

css 元素选择器覆盖底部元素选择器

你好，我正在尝试为我的段落标签着色，但我无法执行此操作，因为顶部 p 标签（元素选择器）覆盖了底部 p 标签。当我写标签名称时它起作用，但我希望它们自动...

html css css-specificity

回答 1 投票 0

这个 CSS 选择器的总体特异性是什么？按钮：不是（#mainBtn，.cta）

在 MDN Web Docs 网站上，他们提到选择器按钮的总特异性：not(#mainBtn, .cta) 如下： |选择器|标识符|课程 |元素 |...

css css-specificity

回答 1 投票 0

为什么 * CSS 选择器在一个简单的示例中获得优先权

今天编码时，我遇到了一个惊喜 - 正在使用没有特异性的元素 CSS 规则，即使存在具有更高特异性的规则。在下面的例子中，我期望： Text1 是蓝色的...

css css-specificity

回答 1 投票 0

我可以覆盖内联！重要吗？

如果你有有没有办法覆盖样式表中的样式以使其显示？最好使用类似的东西： div {

html css css-specificity

回答 8 投票 0

Tailwind css mobile 首先覆盖其他媒体查询和类

在一个角度应用程序（^13.*）中，我已经通过安装并初始化了 tailwindcss > npm install -D tailwindcss postcss autoprefixer > npx tailwindcss 初始化根据他们自己的文档。一开始，我...

angular tailwind-css css-specificity

回答 2 投票 0

背景根据两个 2 个元素的间隔，可以相对于彼此处于任何位置

元素只是很多兄弟姐妹，两个间隔由类a1/a2/b1/b2决定： [a1, a2) 中的元素应具有一种颜色的背景，例如绿色，元素...

html css css-selectors css-specificity

回答 1 投票 0

为什么元素应用的是字体大小属性，而不是颜色属性？

我正在自学Html/Css，请像个傻瓜一样向我解释一下（唷！）帮助消除我试图在无序列表中定位列表项的疑问。我意识到颜色属性不可能是

html css css-selectors css-specificity

回答 1 投票 0

为什么 CSS 'Font-size' 属性适用，但 'color' 属性不适用于下面我的 <li> 标签？

我正在自学Html/Css，请像个傻瓜一样给我解释一下（唷！）帮助消除我试图在无序列表中定位列表项的疑问。我意识到颜色属性不可能是

html css css-selectors css-specificity

回答 1 投票 0

尝试了解 CSS 中的特异性计算

我正在这里阅读 MDN 文档。他们正在解释 CSS 的特殊性。对于button:not(#mainBtn, .cta)，特异性指定为1-0-1。由于这里涉及一个类，我认为特殊性......

css-specificity

回答 1 投票 0

CSS 特异性和/或祖先的继承

我正在尝试根据它们的祖先（特别是不是父母）对一些按钮进行主题化，所以...我有以下 HTML 结构 ... 我正在尝试根据它们的祖先（特别是不是父母）对一些按钮进行主题化，所以...我有以下 HTML 结构 <body class="theme-a"> <section class="container"> <form class="theme-b"> <div class="button-group"> <button type="button">Button B1</button> <button type="button">Button B2</button> </div> <div class="button-group"> <button type="button">Button B3</button> <button type="button">Button B4</button> </div> </form> <form> <div class="button-group"> <button type="button">Button A1</button> <button type="button">Button A2</button> </div> <div class="button-group"> <button type="button">Button A3</button> <button type="button">Button A4</button> </div> </form> </section> </body> 嗯，如您所见，有两个主题 .theme-a 和 .theme-b CSS 代码，如下所示： .theme-a { background: #999; } .theme-b { background: #555; } .theme-a button { background: #222; } .theme-b button { background: #69C; } 问题是：如果您切换主题类（A 与 B，B 与 A），您会注意到 A 主题上的按钮（与主题类有更近的祖先，保留了远祖先的样式，蓝色背景而不是黑色背景）。如何根据最接近的祖先设置按钮属性来实现适当的特异性？这是 JSfiddle 的链接：http://jsfiddle.net/XVaQT/1/ 我希望我能清楚地解释:) 谢谢幸运的是，使用CSS，您可以组合多个选择器来为许多元素指定相同的样式，我用一个工作示例更新了您的jsfiddle，只需更改类theme-a和theme-b，正如您在问题中所说，看看它工作：http://jsfiddle.net/cchana/XVaQT/3/ 我所做的就是添加第二个选择器，您只是在其中寻找 button，它是具有 theme-a 类的元素的后代： .theme-a button { background: #222; } 它现在还会查找 button，它是具有类 theme-b 的元素的后代，而该类本身又是具有类 theme-a 的元素的后代： .theme-a button, .theme-a .theme-b button { background: #222; } 无需向 !important 值添加 background，因为由于此选择器更加具体，它将覆盖为 .theme-b button 定义的样式。这是使用 :has 的 2023 年解决方案，该解决方案基于最近祖先上的 .theme-* 类设置按钮样式，并允许在祖先上无限嵌套 .theme-* 类。 .theme-a:not(:has([class*='theme-'])) button { /* theme-a button styles */ } 选择器说：“给我所有 .theme-a 元素，但不要包含嵌套 theme-* 的元素。” （具体来说，不是具有包含 theme- 的类属性的子元素。）

css inheritance css-specificity

回答 2 投票 0

在一个元素中使用多个类和特异性

只是想知道何时在一个元素上使用多个类，例如 class="foo bar" 并且这些类设置如下： .foo { 右边距：10px； } 。酒吧 { 右边距：0px； } 哪个

css css-specificity

回答 4 投票 0

我不知道如何控制一个ahref的CSS高度。

我有一个HTML页面，嵌入了CSS样式。它有一个输入按钮的形式，说 "提交付款 "使用#fjButton和高度为54，这得到服从。我也有一个有id的#...

html css css-specificity

回答 1 投票 0

提高CSS特异性的最有效字符方式是什么？

如果我想增加规则的CSS特异性，我倾向于在html前面加上前缀，但是我想知道是否还有更简洁的方法？（这似乎是一个琐碎的问题，但在...