Это ссылка на местозаполнитель?

На this page, как <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 }

источник

2013-03-04 pat

Это не то, что происходит - изображение src находится прямо в разметке. Что именно вы спрашиваете? '[src]' просто выбирает что-либо с атрибутом 'src' (изображения). '[src =" 2 "]' выбирает, какой бы элемент имел 'src =" 2 "'. –

Это довольно просто на самом деле - они на самом деле действительные 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 тегов).

источник

2013-03-04 04:51:05

Оба эти HTML-фрагмента действительны. 'li' не нужно явно закрывать, а атрибуты не нужно указывать. –

@WesleyMurch Спасибо, я обновил свой ответ! –

Я как раз собирался вам показать: http://validator.w3.org/check?uri=http%3A%2F%2Fplayground.deaxon.com%2Fcss%2Fslideshow%2F&charset=%28detect+automatically%29&doctype=Inline&group= 0 Только ошибка - это отсутствующие атрибуты «alt» на изображениях. –

Это ссылка на местозаполнитель?

ответ

Смежные вопросы