你能阻止 :first-line 样式应用于 :after Opera 和 Chrome 中的元素吗? [英] Can you prevent :first-line styles from applying to :after elements in Opera and Chrome?
问题描述
在 Chrome 和 Opera 中,似乎 :first-line 规则也适用于 :after 伪元素,并且不能被 !important 或普通 CSS 权重覆盖.
例如,我对像这样的 H2 元素有一系列规则(jsfiddle here)>
CSS
h2.dotted {位置:相对;字体大小:20px;}h2.dotted.first:第一行{字体大小:30px;}h2.dotted:后{内容: "............................................";字体大小:10px !重要;位置:绝对;底部:-1em;左:0;宽度:100%;}
HTML
<h2 class="dotted first">这个头部有一个第一行伪元素<br/>它的 :first-line 规则覆盖了它的 :after 规则.</h2><h2 class="dotted">这个头部没有第一行伪元素<br/>并且它的点的大小正确.</h2>
我所期望的(以及在 IE、FF 和 Safari 中发生的情况)是 :after 伪元素的字体大小为 10px.相反,它的字体大小为 30px.有没有办法纠正这种行为?
我想出了一个办法:
h2.dotted:before {内容:\A………………";字体大小:10px !重要;位置:绝对;底部:-1em;左:0;宽度:100%;空白:预;}
\A"是换行的转义字符.并使用 white-space: pre
强制点成为第二行.
In Chrome and Opera, it appears that :first-line rules apply to the :after pseudo-element as well, and cannot be overridden with !important or normal CSS weighting.
For example, I have a series of rules on an H2 element like so (jsfiddle here)
CSS
h2.dotted {
position: relative;
font-size: 20px;
}
h2.dotted.first:first-line {
font-size: 30px;
}
h2.dotted:after {
content: "............................................";
font-size: 10px !important;
position: absolute;
bottom:-1em;
left: 0;
width: 100%;
}
HTML
<h2 class="dotted first">This header has a first-line pseudo-element<br />
And its :first-line rules override its :after rules.</h2>
<h2 class="dotted">This header has no first-line pseudo-element<br />
And its dots are at the correct size.</h2>
What I would expect (and what happens in IE, FF, and Safari) is that the :after pseudo-element would have a font-size of 10px. Instead, it has a font-size of 30px. Is there a way to correct this behavior?
I figured out a way:
h2.dotted:before {
content: "\A............................................";
font-size: 10px !important;
position: absolute;
bottom:-1em;
left: 0;
width: 100%;
white-space: pre;
}
The "\A" is the escaped character for a new line. And using white-space: pre
forces the dots to be the second line.
这篇关于你能阻止 :first-line 样式应用于 :after Opera 和 Chrome 中的元素吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!