这是一个占位符链接吗？

Question

这是一个占位符链接吗？

4

在这个页面中，<img>标记的引用是如何实现的？样式表中有[src]选择器，但我不知道（或者说太蠢了）。CSS是如何让HTML知道图片在哪里的？

<!doctype html>
<title>Slideshow</title>
<link href=s.css rel=stylesheet>
<ul>
  <li><img src=1>
  <li><img src=2>
  <li><img src=3>
  <li><img src=4>
</ul>

@-webkit-keyframes f {
       0% { opacity:0; }
      12% { opacity:1; -webkit-transform:scale(1.03) }
      25% { opacity:1; -webkit-transform:scale(1.06) }
      37% { opacity:0; -webkit-transform:scale(1.30) }
     100% { opacity:0; } }

@-moz-keyframes f {
       0% { opacity:0; }
      12% { opacity:1; -moz-transform:scale(1.03) }
      25% { opacity:1; -moz-transform:scale(1.06) }
      37% { opacity:0; -moz-transform:scale(1.30) }
     100% { opacity:0; } }

     body { background:#f0f0eb }
ul, [src] { position:absolute }
       ul { overflow:hidden;
            top:50%;
            left:50%;
            width:650px;
            height:300px;
            margin:-200px 0 0 -340px;
            padding:0;
            list-style:none;
            border:15px solid #fff;
            -webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
            box-shadow:0 1px 2px rgba(0,0,0,.2) }

    [src] { opacity:0;
            -webkit-animation:f 12s linear infinite; -moz-animation:f 12s linear infinite }
[src="2"] { -webkit-animation-delay:3s; -moz-animation-delay:3s }
[src="3"] { -webkit-animation-delay:6s; -moz-animation-delay:6s }
[src="4"] { -webkit-animation-delay:9s; -moz-animation-delay:9s }

- pat

2

这不是正在发生的事情——图像的src就在标记中。你具体在问什么？[src]只选择任何带有src属性的元素（即图像）。[src="2"]选择具有 src="2" 的任何元素。 - Wesley Murch

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Danny Beckett · Accepted Answer

其实很简单——它们实际上是有效的URL，例如：

<img src=4>

这是一个相对链接，指向：

http://playground.deaxon.com/css/slideshow/4

或者：

“常见的HTML格式”可能是这样的：

<ul>
  <li><img src="1"></li>
  <li><img src="2"></li>
  <li><img src="3"></li>
  <li><img src="4"></li>
</ul>

不是：

<ul>
  <li><img src=1>
  <li><img src=2>
  <li><img src=3>
  <li><img src=4>
</ul>

我认为缺少引号标记让你感到困惑。

然而，正如@Wesley指出的那样，这也是完全有效的HTML（除了缺少alt标签）。