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

Question

Я использовал 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;
}

Answer 1

a[href^="http:"] 

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

Например:

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

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

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

Answer 2

Это один из селекторов соответствия атрибутов подстроки , доступных в 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
   Этот элемент *Атрибут 1020 * не начинается с http: или других значений.

   Нет фона, но есть отступы слева и справа.

2. Выбирается только a[href^="http:"]
   Атрибут href="http://example.com" этого элемента начинается с http:, но не начинается с http://mysite.com.

   Имеются как левый и правый отступы, так и фонimage.

3. Выбирается с помощью a[href^="http:"] и a[href^="http://mysite.com"]
   Атрибут href="http://mysite.com" этого элемента начинается с http: и далее начинается с http://mysite.com.

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

4. Выбирается с помощью a[href^="http:"] и a[href^="http://www.mysite.com"]
   Атрибут href="http://www.mysite.com" этого элемента начинается с http: и далее начинается с http://www.mysite.com (обратите внимание на www).

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

5. Выбирается с помощью a[href^="http:"] и a[href^="http://mysite.com"]
   Этот элемент href="http://mysite.com/page.php"атрибут начинается с http: и далее начинается с http://mysite.com.

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

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

Answer 3

Это селекторы attribute-start-with , они выберут <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 -->

Answer 4

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

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

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

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

Answer 5

Это селектор атрибута.
Часть ^ = означает, что атрибут href тегов привязки должен начинаться с http: в первом примере.

Answer 6

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

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