个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
25
4
看看这个 jsfiddle:http://jsfiddle.net/ZNddz/
.intro:first-letter {
font-size: 130px;
}
span.letter {
background-color: red;
font-size: 30px;
}
p {
font-size: 80px;
}
第一条规则由一个类选择器和一个伪元素选择器组成= 11
第二条规则包含一个类选择器.letter和一个标签选择器span = 11
这两个规则具有相同的特殊性，因此可以合理地认为获胜者应该是最后一个样式。显然不是这样的。所以我决定向第二条规则添加 background-color 属性，如您所见，它的高度为 30px。
我从中推断出这两个规则都没有选择相同的元素。但我想对这种效果进行官方解释，这有点太奇怪了。
最佳答案
I deduce from this that both rule are not selecting the same element.
这是因为 .intro 匹配 p 元素，而 span.letter 是 .intro 的后代>。 As already mentioned, specificity is not relevant when selectors are matching different elements.但是由于每个选择器确实匹配了一些元素，所以这两个规则都会应用，导致你的红色背景在 span.letter 上生效。
But it's kinda too bizarre that I want to have an official explanation to this effect.
spec包含一些与您所拥有的非常相似的示例:以包含文本的内联级元素开头的 block 级元素，以及应用于 block 级元素的样式 :first-letter block 级元素及其内联级子元素上的伪元素。在所有示例中，:first-letter 伪元素在格式化结构方面始终是最内层的后代；这意味着它嵌套在行内级子元素中。
最后一个示例说明了元素的层次结构，包括伪元素，尽管之前的示例在其样式表中包含一个覆盖规则，它演示了在级联方面发生的情况:
The following CSS will make a drop cap initial letter span about two lines:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Drop cap initial letter</TITLE>
<STYLE type="text/css">
P { font-size: 12pt; line-height: 1.2 }
P::first-letter { font-size: 200%; font-style: italic;
font-weight: bold; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
</BODY>
</HTML>This example might be formatted as follows:
The fictional tag sequence is:
<P>
<SPAN>
<P::first-letter>
T
</P::first-letter>he first
</SPAN>
few words of an article in the Economist.
</P>Note that the
::first-letterpseudo-element tags abut the content (i.e., the initial character), while the ::first-line pseudo-element start tag is inserted right after the start tag of the block element.
在您的情况下，两个 font-size 声明照常应用，但由于 .intro:first-letter 嵌套在 within span.letter，它使用自己的font-size 值。如果您使用相对值 it would be calculated based on span.letter , 如果你根本没有包含 font-size 样式 it would simply inherit it from span.letter .
请注意，:first-letter 伪元素不适用于内联级元素(但它确实适用于内联 block ):
In CSS, the
::first-letterpseudo-element applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements.
行内框(使用display: inline 生成的)不是block container box . (是 block 容器框的行内级框的示例是行内 block 。)
如果浏览器将伪元素应用于内联，那么它就违反了规范。虽然没有迹象表明当您对 block 容器和内联框后代都有 :first-letter 规则时应该发生什么，因为它确实说它不适用于内联，理想情况下是浏览器应该始终忽略针对行内框后代的规则。显然，Chrome 不这么认为。见Danield's answer .
关于css - 相同的特异性，考虑到布局后，:first-letter always wins?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19118036/
25
4
0
我正在尝试在 delphi 下创建一个名为 TRange 的通用类。这个想法是，它可以是整数范围或单精度范围或 double 范围等... TRange 对象包含一些 T 类型的变量(maxValue
我对 Javascript 非常陌生，正在寻找一种方法让我的代码仅响应列表中单击的项目。 (完整的 JSFiddle 在这里: http://jsfiddle.net/5cjPF/ ，尽管由于某种原因
我遇到了一个问题，我无法获得使某些代码正常工作所需的特异性级别。我有一个 我想为其制作 的背景悬停在带有花哨的小滑入动画上时会发生变化。 我设法使用 linear-gradient 让它工作得很好用
我在使用一些自定义的 960.gs 类时遇到了一些困难。当我使用子容器时出现问题，子容器的列只是继承主容器列规则的宽度。 在我看来，内部单元格 (foo + bar) 应该是绿色的。这意味着他们应该获
我将第 3 方组件附加到 div 元素(容器)。此 div 元素位于 from 内，表单具有 cssform 类。我使用的主要 CSS 表包含定义: .cssform div { max-wi
我在一个 HTML 元素上有两个 CSS 类:.c-headline-1和 .c-hero__headline .在我的外部样式表中，我使用 .c-headline-1在内部样式表 ( ) 中，我使
我在这里对我的样式表感到非常困惑。我的工作表中有很多特定的链接样式，由于某种原因，当我使用 Chrome 开发工具或 Firebug 检查页面时，其中一个随机样式会被其他样式覆盖。在摆弄 !impor
我正在重新设计我的博客，考虑到响应式网页设计和“移动优先”方法 - 简而言之，我正在尝试使用最小宽度来避免任何类型的复制或 css.. 没有显示:无等.. 我的问题是，当我确实需要覆盖 CSS 值时，
我一直在阅读有关特异性的内容，坦率地说，我很惊讶我之前没有正确了解这一点，因为我亲眼目睹了如果 CSS 声明错误，特异性可能会带来的问题方式。 所以，我对这个主题做了一些研究，现在我了解了计算特异性的
我一直在阅读特异性，坦率地说，令我惊讶的是我之前没有正确地了解这一点，因为我亲眼目睹了如果 CSS 声明错误，特异性会带来的问题方式。 因此，我一直在对该主题进行一些研究，现在我了解了计算特异性的规则
我想使用以下内容来定位我的 div 中最后一个 ul 的最后一个链接 (a)。所以这就是我想到的: #menu ul:last-child li a { /*.....*/ } 我无法手
为什么这两个结果不等价？第一个显示绿色行，而第二个不显示。唯一不同的是html c 还有，nth-child选择器的特殊性是什么？ Stripe Test
我正在制作响应式电子邮件模板，并希望申请 display: block !important至 2 元素，以便从 2 列布局变为 1 列布局。我正在使用以下选择器: td[class="mainArt
我在大学计算机科学系的 Web 开发课上，老师问类(class):“为什么类选择器规则应用在标签选择器规则之上(参见示例代码)？”。我回答说这是因为 CSS 的特殊性，我被告知我错了。他想要的答案是因
这对我来说是一个学习练习，所以在此先感谢您没有告诉我为什么我不想执行以下操作。我不想做，我想明白。 给定以下 CSS: input[type="file"]:focus, input[type="ra
我正在编写一堆 PHP 类，它们将用于创建 Wordpress 插件，但也可以在任何其他环境中使用。在自己测试我的脚本之后，一切似乎都很好，但是当我为它创建一个 WP 插件时，出现了我预见到的 CSS
我简单看了下CSS3 Selectors spec但找不到任何解决这个问题的方法。此外，我没想到当您移动 CSS 声明时结果会发生变化，但它确实发生了变化。任何帮助都会很棒。 div.green_co
假设我有以下 CSS: .InfoTable-main-table tbody tr td:before{ background: #222; color: #fff; c
因 CSS 存在特殊性问题而发疯。HTML。
http://jsfiddle.net/DkAqZ/9 HTML default black text default red link #inner gr
我是一名优秀的程序员,十分优秀！