Что делает[href^="..."] в CSS?

я использовал 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;
}
35
css css-selectors css3

6 ответов

a[href^="http:"]

выбирает <a> элемент которого href значение атрибута начинается с http:.

например:

p[title^="para"] {background: green;}

будет соответствовать следующее:

<p title="paragraph"> This paragraph should have a green background. </p>
42

это один из подстрока-соответствующие селекторы атрибутов доступно в 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's 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's base URL without www</a></li>        

    <!-- [4] No background, no right padding -->
    <li><a href="http://www.mysite.com">My site's 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>

что происходит?

  1. выбранный a только
    Этот элемент href="/index.php" атрибут не начинается с http: или другие ценности.

    нет фона, но есть левая и правая обивка.

  2. выбран a[href^="http:"] только
    Этот элемент начинается с http: но не начинается с http://mysite.com.

    есть как левая, так и правая обивка, а также фон изображение.

  3. выбран a[href^="http:"] и a[href^="http://mysite.com"]
    Этот элемент начинается с http: и далее начинается с http://mysite.com.

    поскольку второй селектор отменяет первый селектор, фоновое изображение и правое заполнение удаляются.

  4. выбран a[href^="http:"] и a[href^="http://www.mysite.com"]
    Этот элемент начинается с http: и далее начинается с http://www.mysite.com (обратите внимание на www).

    поскольку второй селектор отменяет первый селектор, фоновое изображение и правое заполнение удаляются.

  5. выбран a[href^="http:"] и a[href^="http://mysite.com"]
    Этот элемент начинается с http: и далее начинается с http://mysite.com.

    обратите внимание, что по сравнению с третьей ссылкой атрибут в этом содержит больше, чем просто базовый URL; однако ^= указывает, что значение атрибута просто должно быть начнем с базовый URL вашего сайта, в отличие от = что будет означать " выберите ссылки, которые указывают только на http://mysite.com". Таким образом, эта ссылка соответствует второму селектору.

    поскольку второй селектор отменяет первый селектор, фоновое изображение и правое заполнение удаляются.

25

это атрибут-начинается-с селекторов, они выберите <a> элементы с начиная с этого значения, например a[href^="http:"] соответствует любым якорям с href начиная с href="http:....", например:

<a href="http://www.google.com">Test</a> <!-- would match -->
<a href="#element">Test</a>              <!-- wouldn't match -->
6

для каждой ссылки, параметр которой" href "начинается с" http:", установите фон на ключевое изображение (без повторения, расположенное в правом верхнем углу).

для каждой ссылки, которая является параметром" href", начинается с "http://mysite.com" или "http://www.mysite.com", установите фоновое изображение в ничто (и правое заполнение в 0).

для меня это похоже на умный трюк CSS, который заставит ваших пользователей знать, когда они покидают ваш сайт через внешняя ссылка путем отображения ключевого изображения.

(Я думаю, я буду использовать его в будущем. :)

5

правила говорят, согласно консорциум W3C документы:

  • все якоря, которые имеют начинается с http:
  • все якоря, которые имеют href атрибут, который начинается с http://mysite.com или http://www.mysite.com
0

это селектор атрибутов.
The ^= часть означает, что атрибут href якорь теги начать С http: в первом примере.

0