我正在尝试结合使用伪选择器和伪元素来创建自定义工具提示。
我的 HTML：
<input id='test'/>
我的CSS：
<input id='test'/>
运行代码的小提琴：http : //jsfiddle.net/9ujEH/
目前，当#test:focus 聚焦时，输入将变为蓝色，但黑色方块并没有像我想象的那样从#test:focus:before 中显示出来。
我已经阅读了几篇较早的SO帖子,研究关于锚伪类的信息,并且不断遇到"a"与"a:link"之间的混淆以及何时以及为什么要使用它们.在我看到的最常见的原因中,经常会说"a"会像链接一样
<a name="something">
如何教授 Stylelint Angular 的选择器 ":host" ？
例如MGechev 的 Angular2-Seed在其构建过程中显示“：host”为错误：
src/client/app/+home/home.component.css
1:1 ? Unexpected unknown pseudo-class selector
":host" (selector-pseudo-class-no-unknown) [stylelint]
尝试找到一个<div>以这样的目标为目标的伪类：
<div class="nav-previous">
</div>
我试过了:blank，:empty但都检测不到。难道只是做不到吗？
在当前 Chrome (80) 中检查以下代码片段：
foo.addEventListener('click', () => {
console.log('button activated');
})button:active {
background-color: yellow;
}<button type="button" id="foo">Activate me using Click, Enter, Space</button>Chrome在单击button:active（向左或向右）按钮或使用 激活按钮时应用样式，但在使用 激活时则不应用样式。Space Enter
button:activeFirefox 仅在单击（仅鼠标左键）按钮时应用样式。
有人知道吗
button:active无论使用哪种激活方法，如何让按钮显示？我非常喜欢基于 CSS 的解决方案。使用关键侦听器添加/删除类将是一个非常丑陋的解决方案，并且不在这个问题的范围内。
必须有，或者至少应该有一种标准方法，让用户使用Enter其操作的视觉反馈来激活按钮。这种行为是否没有在某处指定？如果是的话，我可以将其作为 Mozilla 错误跟踪器和 Chromium 问题跟踪器上的问题提出。
如果我定义按钮的向上和向上状态,如下所示:
.button {color:red;}
.button:hover {color:blue;}
如何hover使用JQuery获取元素的所有状态样式？
像$(".button:hover").css('color');...的东西
http://jsfiddle.net/nicktheandroid/k93ZK/2/
这应该很简单,我只是不明白为什么它不起作用.当将鼠标悬停在:before它上面时,应将其不透明度更改为1,但事实并非如此.为什么？
p {
padding-top:15px;
position:relative;
}
p:before {
display:block;
width:55px;
height:55px;
content: 'hello';
background:#fff;
padding:5px 10px;
position:absolute;
right:0;
opacity:.5;
-webkit-transition: all 0.3s ease-in-out;
}
p:before:hover {
opacity:1;
bakcground:#000;
}
编辑:我正在使用Chrome.
例如我有这个:
<div>
<a href="#">sample 1</a>
<a href="#">sample 2</a>
<a href="#">sample 3</a>
</div>
我想用CSS定位第一个链接.
我试图用来querySelector在页面中查找活动元素.我假设绑定到文档上的mousedown事件的处理程序将在事件从目标返回后触发,这意味着:active应该已经应用了伪类.
document.addEventListener("mousedown",function(e){
console.log(document.querySelector("*:active"));// logs null
// expected value was the target of the mousedown event, that is,
console.log(e.target);
});
我的问题是::active伪类究竟适用于什么时候？请注意,当我记录该值时,mousedown事件已在目标上触发.
有关示例,请参见http://jsfiddle.net/tK67w/2/.这里要注意的一件有趣的事情是,如果在处理程序中设置断点,您可以看到我为a:active已经应用定义的css规则,尽管querySelector返回null
编辑:
感谢TJ提出更好的示范.问题仍然存在:在IE和Chrome以外的浏览器中,如何激活所有活动元素的HTMLCollection？
据我所知,CSS选择器从右到左进行评估,因此body div *会选择每个项目,而不是具有div类型的父项和具有body类型父项的项目.我不确定的是如何在这个链中评估动态伪类.
如果我有一个选择器div *:hover,评估会如何？
:hover=> *=>div*=> :hover=>divpseudo-class ×10
css ×9
html ×2
javascript ×2
anchor ×1
angular ×1
css3 ×1
csslint ×1
deprecated ×1
dom-events ×1
host ×1
jquery ×1
performance ×1
stylelint ×1
targeting ×1