标签: pseudo-element

像a:link或div::after......

有关差异的信息似乎很少.

在CSS中,可以placeholder使用特定于供应商的伪类和伪元素的组合来在输入中设置文本样式(以获得最佳的跨浏览器覆盖率).

这些都具有相同的基本属性(即:文本样式和颜色声明).

然而,虽然我不可避免地想要应用相同的样式而不管浏览器供应商,但似乎不可能将它们组合成逗号分隔的选择器(就像您希望两个选择器共享的任何其他CSS一样)相同的风格).

作为一个例子,我倾向于使用以下四个选择器来定位占位符样式:

• input:-moz-placeholder
• input::-moz-placeholder
• input:-ms-input-placeholder
• input::-webkit-input-placeholder

(虽然:-moz-placeholder 被弃用赞成::-moz-placeholder所以目前两者都需要更好的浏览器的支持,这只是发生与Firefox 19发布).

令人沮丧的是,声明和赋予每种(相同)样式会导致CSS中的大量重复.

因此,为了确保占位符文本是右对齐和斜体,我最终会得到:

input:-moz-placeholder{
    font-style: italic;
    text-align: right;
}
input::-moz-placeholder{
    font-style: italic;
    text-align: right;
}
input:-ms-input-placeholder{
    font-style: italic;
    text-align: right;
}
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

我真正想要做的是将它们组合成一个单独的逗号分隔规则集,如下所示:

input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

然而,尽管在相当多的时间尝试过,但这似乎永远不会奏效.这让我担心CSS有一些我不理解的基本部分.

有人可以解释为什么会这样吗？

我想在<br />一个特定的课上追加一个.使用:after伪类只显示<br />为文本.

有没有办法让这项工作？

它是IE8的内部,所以浏览器问题不是问题.如果我做

<span class="linebreakclass">cats are</span> brilliant

我希望"辉煌"出现在新的一条线上.

我是新的伪元素,前缀为双冒号.我遇到了一篇博客文章,讨论使用一些webkit only css来讨论滚动条的样式.伪元素CSS可以应用于单个元素吗？

/* This works by applying style to all scroll bars in window */
::-webkit-scrollbar {
    width: 12px;
}

/* This does not apply the scrollbar to anything */
div ::-webkit-scrollbar {
    width: 12px;
}

在这个小提琴中,我想自定义div的滚动条,但主窗口的滚动条保持默认状态.

http://jsfiddle.net/mrtsherman/4xMUB/1/

我正在使用:after和:beforecss伪元素,它在IE8和所有现代浏览器中工作正常,但它在IE7中工作不正常.在IE7中有没有可以解决这个问题？

我正在构建React组件.我在组件中添加了CSS inline,正如React背后的人之一所展示的那样.我一直在努力寻找一种方法来内联添加CSS伪类,比如在演示文稿中标题为":: after"的幻灯片上.不幸的是,我不仅需要添加content:"";属性,还需要position:absolute; -webkit-filter: blur(10px) saturate(2);.幻灯片显示了如何添加内容{/* … */},但是如何添加其他属性？

是否可以通过JavaScript更改CSS伪元素样式？

例如,我想动态设置滚动条的颜色,如下所示:

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");

而且我也希望能够像这样告诉滚动条隐藏:

document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

但是,这两个脚本都返回:

未捕获的TypeError:无法读取null的属性'style'

还有其他方法可以解决这个问题吗？
跨浏览器的互操作性并不重要,我只需要它在webkit浏览器中工作.

我知道以前曾经问过,但我发现没有干净的方法来覆盖这个CSS:

.ui-input-search:after {
    content: "";
    height: 18px;
    left: 0.3125em;
    margin-top: -9px;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    width: 18px;
}

我需要留下ui-input-search元素,但可以添加我自己的类,如:

.ui-input-search-no-pseudo:after {
   content: "";
}

问题:
是否有一种简单的方法可以删除"伪css"而无需逐行覆盖CSS？

谢谢!

这是一个小提琴.

<p>foo <a class="infolink" href="#">bar</a> baz</p>

和

a.infolink::before
{
    content: '?';
    background: blue;
    color: white;
    width: 20ex;
    height: 20ex;
}

'？' 出现,但显然没有20ex大小.为什么不？在Firefox和Chrome中测试过.

所以我一直在玩这个日历 - 是什么东西:

• div网格(模仿表格)
• 将鼠标悬停在表格单元格上会显示一个工具提示,其中包含2个图标,每个图标由一个div组成:before和:after元素
• 图标会根据悬停的单元格的颜色以及之前的兄弟单元格的颜色(单元格的颜色类应用于图标)来更改颜色.

剥掉小提琴:http://jsfiddle.net/e9PkA/1/

这适用于每个浏览器,但IE8及以下(IE lte 7和我永远不会是朋友,但IE8会很高兴).

IE8注意到classNames的更改并相应地更新了div的颜色,但完全忽略了:before和:after声明所隐含的颜色变化,例如:

.wbscal_icon_arrival:before {
    width: 12px;
    height: 4px;

    left: -8px;
    top: 6px;
    background-color: silver;
}

.wbscal_icon_arrival.wbscal_full:before {
    background-color: #ff0000 !important; 
}

在上面的小提琴中,:before /:after元素只有一次着色:第一次显示工具提示.

在另一个版本中,每当我将鼠标移出"table"div时它都会更新,但是如果在悬停"cell"div边界时隐藏工具提示则不会更新.

我已经尝试通过向/从元素/其父/身体添加/删除其他类来强制触发重绘,编辑/访问样式属性等等所以我想这不是你的平均重绘问题.

是否有一个JS hack修复了这个并强制:在/之后更新？