标签: pseudo-class
CSS:a:链接vs只是一个(没有:链接部分)
所以我们需要对CSS anchor伪类使用以下顺序
a:link { color: red }
a:visited { color: blue }
a:hover { color: yellow }
a:active { color: lime }
但我的问题是为什么要打扰a:link部分？相反,上述(除了清晰度之外)是否有任何优势:
a { color:red; } /* notice no :link part */
a:visited { color: blue; }
etc.,etc.
推荐指数
解决办法
查看次数
仅在悬停时转换为边框,但不适用于背景
这里我有一些CSS:
#image-edges-beneath:hover{
background-color: blue;
}
#image-edges:hover{
background-color: blue;
}
#image-edges-beneat:hover:after{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
border: 2px solid #F1FD6D;
}
#image-edges:hover:after{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
border: 2px solid #F1FD6D;
}
但这不起作用.唯一发生的事情是背景颜色有一个过渡,而我希望它只在悬停时改变,而边框我想要一个过渡,所以基本上边框渐渐变成颜色,而背景颜色在悬停时立即改变颜色.这就是我想要完成的,但这不起作用.:(任何想法用户？
推荐指数
解决办法
查看次数
如何使用CSS在元素之后但不在元素之前插入换行符？
例如:
HTML:
The quick brown fox <span class="break">{BREAK}</span> jumps over the lazy dog.
我希望这个显示:
快速棕色狐狸{BREAK}
跳过懒狗.
我看了看display房子,但display:inline;没有破坏任何地方,并display:block在两边都打破了.
我也查看了:after伪类,但.break:after{content:"\000A";}最终渲染为空格而不是换行符.
推荐指数
解决办法
查看次数
如何通过JavaScript更改伪类风格？
为简单起见,这个例子只是我需要做的一个例子.说,我有一个元素,哪个样式在CSS中设置.为元素以及Pseudo-class设置样式,比如元素:悬停.我可以使用以下JavaScript覆盖元素的样式:element.style.setProperty('property-name','new value','').如何通过JavaScript更改Pseudo-class的样式？
谢谢.
<html>
<head>
<style type='text/css'>
#myBtn {
background-color: red;
}
#myBtn:hover {
background-color: blue;
}
</style>
</head>
<body>
<button id='myBtn'>Colored button</button>
<button onclick="ChangeColor();">Script button</button>
<script type="application/x-javascript">
function ChangeColor() {
var Btn = document.getElementById('myBtn');
Btn.style.setProperty('background-color', 'green', '');
};
</script>
</body>
</html>
推荐指数
解决办法
查看次数
在IE中使用伪类检查元素
我正在寻找一种方法来检查:hover从IE中使用伪类(例如)设置样式的元素.
我可以使用Firebug HTML样式下拉列表在Firefox中执行此操作,该下拉列表允许浏览器将伪类应用于所选元素:
我也可以通过切换元素状态在Chrome中执行此操作:
但是,我还没有找到与IE开发人员工具类似的选项.我尝试过使用Firebug Lite,但Firefox中出现的相同选项似乎不属于Lite版本.
有没有办法将伪类应用于IE中的元素(类似于Firefox和Chrome),以便我可以看到它是如何被设置样式,或者在IE中观察伪类样式？
推荐指数
解决办法
查看次数
什么是:any-link伪类？
我不知道它是否是任何标准的一部分,但至少有两个主要的浏览器实现了它:
:-webkit-any-link在Chrome中:-moz-any-link在Firefox中
我找不到任何文件.我想知道它的用途,浏览器支持和使用示例.
推荐指数
解决办法
查看次数
如何在伪类之前和之后删除或禁用？
这看起来非常微不足道,但我无法弄明白.简单地覆盖它display:none不适用于IE8.
#selector::after {
display: none;
}
我正在修改一个在伪类之前和之后使用的主题来添加图像精灵.
推荐指数
解决办法
查看次数
为什么nth-of-type/nth-child不能在嵌套元素上工作？
我正在尝试改变div中奇数div的样式.出于某种原因,nth-of-type(odd)当它在另一个div中时,它会影响我的所有div.这是我的常规div和奇数div的代码:
.video-entry-summary {
width: 214px;
height: 210px;
margin-left: 10px;
float: left;
position: relative;
overflow: hidden;
border: 1px solid black;
}
.video-entry-summary:nth-of-type(odd) {
width: 214px;
height: 210px;
margin-left: 0px;
float: left;
position: relative;
overflow: hidden;
border: 1px solid black;
background: #ccc;
}<div id="post-501" class="post-501 post type-post status-publish format-standard hentry category-moto-dz-films tag-news-sub-2">
<div class="video-entry-summary">
video 1
</div>
</div>
<div id="post-240" class="post-240 post type-post status-publish format-standard hentry category-videos">
<div class="video-entry-summary">
video 2
</div>
</div>
<div id="post-232" class="post-232 post type-post status-publish …推荐指数
解决办法
查看次数
检查/切换浏览器开发工具中的 CSS 伪类
我们有几十个CSS 伪类。大多数浏览器的开发人员工具只允许我们检查/切换其中的少数几个，例如:hover、:focus、:active。
您如何检查特定元素是否具有其他伪类？你怎么能切换它们？
一个例子是，自举表单验证应用:invalid和:valid伪类到input元件取决于它是否通过了验证。假设我们需要通过检查和切换这些伪类来调试自定义验证规则和反馈。你会如何在开发人员工具中做到这一点？
我的问题不限于 Chrome DevTools；使用任何浏览器开发人员工具回答这个问题都很好。同样，我不将此问题限制在 Bootstrap 验证的特定用例中（这只是我想到的第一个），因为该用例仅涵盖许多其他 CSS 伪类中的两个。
推荐指数
解决办法
查看次数
使用:在li或其他元素上使用焦点伪类,而不是输入,按钮等
是否可以选择一个聚焦的元素,如:焦点或输入:焦点,但在另一个元素上,如div,li,span或其他？
如果不可能,如何用标签代替？我正在尝试修改li元素的高度,当它聚焦时,尝试使用a,但高度不会改变.
请求的信息:
"你能解释一下如何把重点放在LI身上？"
通过css选择器li:focus.请参阅https://jsfiddle.net/s4nji/Rjqy5/.
推荐指数
解决办法
查看次数
标签 统计
css ×10
pseudo-class ×10
html ×3
anchor ×1
browser ×1
css-sprites ×1
css3 ×1
debugging ×1
hover ×1
javascript ×1
linefeed ×1
newline ×1