这是一个占位符的链接吗？

问题描述：

在this page，在标记中0123xx引用是如何完成的？样式表有[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 }

这不是发生了什么 - 标记中的图像src就在那里。你到底在问什么？ '[src]'只选择任何带有'src'属性的东西（图像）。 '[src =“2”]'选择具有src =“2”'的任何元素。 – 2013-03-04 04:51:57

答

这其实非常简单 - 它们实际上是有效的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标签）。

这两个HTML代码段都是有效的。 'li'不需要被明确地关闭，并且属性不需要被引用。 – 2013-03-04 04:57:14

@WesleyMurch谢谢，我更新了我的答案！ – 2013-03-04 04:59:48

我刚刚向您展示：http://validator.w3.org/check?uri=http%3A%2F%2Fplayground.deaxon.com%2Fcss%2Fslideshow%2F&charset=%28detect+automatically%29&doctype=Inline&group= 0只有错误是图像上缺少的“alt”属性。 – 2013-03-04 05:00:20

这是一个占位符的链接吗？

相关推荐