我有以下HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:before pseudo-class and images</title>
<style type="text/css" media="screen">
img {
display: block;
width: 640pt;
}
img:before {
content: "Test";
}
</style>
</head>
<body>
<img src="http://andreygromov.name/picture/flower/flower4.jpg" alt="???? ? ???????" />
</body>
</html>
:之前不会出现图像,但它适用于任何div.
为什么？
更新:我在W3C中找到了这个解释:
注意.此规范未完全定义:替换元素(例如HTML中的IMG)之前和之后的交互.这将在未来的规范中更详细地定义.
更新2:
我忘了提 - 我需要用CSS可视化图像的"alt"属性.
img:before {
display: block;
content: attr(alt);
background-color: #333;
/* etc. */
}
我最近遇到了一个问题,我的网页设计项目一直微不足道,几次没有穿过我的手指,但它只是太烦人了.
假设我有一个包含以下规则的样式表:
a {
outline: 0;
text-decoration: underline;
}
a:link {
color: #0099FF;
}
a:visited {
color: #0099FF;
}
a:hover {
color: #FFFF00;
}
a:active {
color: #33FF66;
}
我的文档中的链接有时只会有正确的颜色,但有时它们只是默认的蓝色 - >紫色链接.我在黑色背景上,所以这些看起来很糟糕.
如果我刷新页面,大约一半时间它们将正确呈现.这在Firefox和Chrome中都会发生.
这是怎么回事？
我正在尝试使用LESS CSS来编写我的CSS,但是我遇到了嵌套伪类的问题
.class1 {
&:nth-of-type(2n) {
.class2{
}
}
}
输出是:
.class1.class2:nth-of-type(2n) {}
但我希望有这个:
.class1:nth-of-type(2n) .class2{}
有任何想法吗？
第一个字母伪类适用于p元素,但不适用于锚点(链接).为什么？如何使<a>元素的第一个字母样式不同
a:first-letter
{
font-size:200%;
text-transform:uppercase;
color:#8A2BE2;
}
我一直在修补一些用于HTML标记的CSS.我面临的问题是已经使用CSS :first-line伪类应用了一种样式.我想要的是在悬停状态下改变第一行的样式.有没有办法应用类似的东西p:first-line:hover？
我创建了两个简单的html页面,其中一个包含iframe,第二个页面加载到第一页的iframe中.第一页位于http://quatorze.atspace.co.uk/Webdev/shared/ffbug1.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>:target bug in firefox</title>
<style type=text/css>
iframe:target {
display: none;
}
ol {
max-width: 480px;
font-family: sans-serif;
}
li {
margin: 8px;
}
span {
color: red;
}
</style>
</head>
<body>
<div id="div0">
<p><a href="#if">HIDE</a> <a href="#div0">SHOW</a></p>
<iframe id="if" src="ffbug_files/ffbug3.html" width="400" height="200"></iframe>
<ol>In Firefox click links on this page in following order:
<li>Click "DIV 1". First div gets targeted and its background turns silver;</li>
<li>Click "HIDE". Iframe gets targeted and its "display" property …我有以下代码:
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
我用灰色条纹设计了这个列表:
.list li:nth-child(2n) {
background-color: #ccc;
}
效果很好,但后来我隐藏了一些li元素和条纹的顺序.小提琴
我尝试用以下方法更新选择器:not():
.list li:not(.hidden):nth-child(2n) {
background-color: #ccc;
}
但这没用.
任何人都可以建议如何订购伪类以保持条纹顺序？
我已经阅读了几篇较早的SO帖子,研究关于锚伪类的信息,并且不断遇到"a"与"a:link"之间的混淆以及何时以及为什么要使用它们.在我看到的最常见的原因中,经常会说"a"会像链接一样
<a name="something">
在当前 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 问题跟踪器上的问题提出。
pseudo-class ×10
css ×9
anchor ×3
html ×3
css3 ×2
deprecated ×1
firefox ×1
javascript ×1
less ×1