Я использовал CSS раньше, и я наткнулся на нижеприведенный стиль CSS, не знаю, что он делает.
a[href^="http:"] {
background: url(img/keys.gif) no-repeat right top;
}
a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
background-image: none; padding-right:0;
}
a[href^="http:"]
Выбирает элемент <a>, значение атрибута href начинается с http:.
Например:
p[title^="para"] {background: green;}
Соответствует следующему:
<p title="paragraph"> This paragraph should have a green background. </p>
Это один из селекторов атрибутов соответствия подстрок, доступных в CSS3. Он сопоставляет ссылки с атрибутами href, значения которых начинаются с данной строки.
Чтобы проиллюстрировать, мы возьмем ваш пример CSS и добавим некоторые значения по умолчанию:
a {
background: none; padding: 0 1em;
}
a[href^="http:"] {
background: url(img/keys.gif) no-repeat right top;
}
a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
background-image: none; padding-right:0;
}
И создайте с ним следующий HTML-код. Стили выходных данных суммируются в комментариях:
<ul>
<!-- [1] No background, 1em left and right padding -->
<li><a href="/index.php">My site page</a></li>
<!-- [2] Background, 1em left and right padding -->
<li><a href="http://example.com">External link</a></li>
<!-- [3] No background, no right padding -->
<li><a href="http://mysite.com">My site base URL without www</a></li>
<!-- [4] No background, no right padding -->
<li><a href="http://www.mysite.com">My site base URL with www</a></li>
<!-- [5] No background, no right padding -->
<li><a href="http://mysite.com/page.php">A page in my site with base URL</a></li>
</ul>
Что происходит?
Выбрано только a
Этот атрибут href="/index.php" не начинается с http: или других значений.
Нет фона, но есть левое и правое дополнение.
Выбрано только a[href^="http:"]
Этот атрибут href="http://example.com" начинается с http:, но не начинается с http://mysite.com.
Есть как левое, так и правое заполнение и фоновое изображение.
Выбрано a[href^="http:"] и a[href^="http://mysite.com"]
Этот атрибут href="http://mysite.com" начинается с http: и далее начинается с http://mysite.com.
Так как второй селектор перекрывает первый селектор, фоновое изображение и правое заполнение удаляются.
Выбрано a[href^="http:"] и a[href^="http://www.mysite.com"]
Этот атрибут href="http://www.mysite.com" начинается с http: и далее начинается с http://www.mysite.com (обратите внимание на www).
Так как второй селектор перекрывает первый селектор, фоновое изображение и правое заполнение удаляются.
Выбрано a[href^="http:"] и a[href^="http://mysite.com"]
Этот атрибут href="http://mysite.com/page.php" начинается с http: и далее начинается с http://mysite.com.
Обратите внимание, что по сравнению с третьей ссылкой атрибут в этом содержит больше, чем просто базовый URL; однако ^= указывает, что значение атрибута должно начинаться с базового URL вашего сайта, а не =, что означает "выбирать ссылки, которые указывают только на http://mysite.com". Следовательно, эта ссылка соответствует второму селектору.
Так как второй селектор перекрывает первый селектор, фоновое изображение и правое заполнение удаляются.
Это атрибут-начинается с селекторами, они будут выбирать элементы <a> с атрибутом href, начиная с этого значения, например a[href^="http:"] соответствует любым якорям с href, начиная с href="http:....", например:
<a href="http://www.google.com">Test</a> <!-- would match -->
<a href="#element">Test</a> <!-- wouldn't match -->
Для каждой ссылки, параметр "href" начинается с "http:", установите фон на ключевое изображение (без повторения, расположенного в правом верхнем углу).
Для каждой ссылки, параметр "href" начинается с "http://mysite.com" или "http://www.mysite.com", установите фоновое изображение в ничто (а правая сторона - 0).
Для меня это похоже на умный трюк CSS, который заставит ваших пользователей знать, когда они покидают ваш сайт через внешнюю ссылку, отображая ключевое изображение.
(Я думаю, что буду использовать его в будущем.:)
Правила говорят, согласно документам W3C:
href, который начинается с http:href, начинающийся с http://mysite.com или http://www.mysite.comЭто селектор атрибутов.
Часть ^ = означает, что атрибут href якорных тегов должен начинаться с http: в вашем первом примере.