В чем разница между |= и ^= в css?
Из-за этой ссылки она не одна, но зачем им дублировать две вещи? http://www.w3schools.com/cssref/css_selectors.asp
[атрибут | = значение] и [атрибут ^ = значение]
Первый имеет
Выбирает каждый элемент, значение атрибута src которого начинается с "HTTPS"
второй имеет
Выбирает все элементы со значением атрибута lang, начинающимся с "en"
Я думаю, что официальное описание в документе w3c говорит само за себя:
E[foo|="en"] - элемент E, значением атрибута foo которого является разделенный дефисом список значений, начинающийся с en
E[foo^="bar"] - элемент E, значение атрибута foo которого начинается именно со строки "bar"
Документы W3Schools иногда неточны, поэтому для получения хорошей документации либо перейдите на MDN, либо на Sitepoint, либо используйте официальный документ W3C.
В основном, селектор |= полезен для атрибутов составных классов и языков.
<div class="wrapper-inner"><span lang="en-GB">...</span></div>
div[class|='wrapper']{/*...*/}
span[lang|='en']{/*...*/}
^= более широко выбирает "совпадение подстроки", как самые первые буквы вашего атрибута.
Почему использование w3schools, когда официальная документация W3C там?
E[foo^="bar"]элемент E, значение атрибута "foo" начинается точно с строки "bar" (селекторы атрибутов CSS3)
E[foo|="en"]элемент E, атрибут "foo" содержит список значений, разделенных символами (слева) с "en" (селекторы атрибутов CSS2)
w3schools не является хорошим источником знаний (проверить этот сайт). Вы должны полагаться на официальную спецификацию CSS:
E[foo^="bar"] элемент E, значение атрибута "foo" начинается точно со строкой "bar"
E[foo|="en"] элемент E, атрибут "foo" содержит список значений, дефинированный от дефиса (слева) с помощью "en"
Примеры использования:
Следующий селектор представляет собой элемент, для которого значение атрибут hreflang начинается с "en" , включая "en" , "en-US" и "Ан-Scouse":
a[hreflang|="en"]
Следующий селектор представляет объект HTML, ссылаясь на Изображение:
object[type^="image/"]
Пожалуйста, проверьте следующий пример. Вы получите лучшее понимание между двумя селекторами.
/* select all lang attribute starting with "en" */
[lang^=en] {
border: 1px solid red;
}
/* select all hyphen-separated lang attribute starting with "en" */
[lang|=en] {
background: yellow;
}<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en_gb">Ello!</p>