Использование совпадений подкода и информации о данных в движке селектора javascript

Question

Привет, я использую селекторный движок 'Qwery' от dustin diaz . Если вы нажали эту ссылку, на странице примера отображаются селекторы типа

div#baz.thunk a[-data-info*="hello world"] span + strong {}

и

#foo a[lang|=en] {} subcodes

Я не мог понять, как использовать субкоды и data-info Я даже читал страницу w3c селектора CSS2, но не мог понять ее. Может ли кто-нибудь объяснить на простом примере, как это работает? Мое представление о -данных-данных совпадает со свойствами innerHTML, Dom объекта, как показано ниже

<a href="http://www.google.com">Hello</a>

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

qwery("a[-data-innerHTML='Hello']");

уточните мои понятия и предложите написать запрос, чтобы получить innerHTML / другие свойства с использованием механизма выбора qwery

Answer 1

Вот хорошая статья

http://www.programmervn.com/2010/11/30-css-selectors-you-must-memorize-part.html

http://www.programmervn.com/2010/11/30-css-selectors-you-must-memorize-part_17.html

Extract:

Вот особый, который впечатлит твои друзья. Не слишком много людей знают об этом трюке. Символ тильда (~) позволяет нам нацелить атрибут, который имеет разделенный пробелами список значений.

В соответствии с нашим пользовательским атрибутом с пятнадцатого числа выше, мы могли бы создать атрибут data-info, который может получить разделенный пробелами список все, что нам нужно отметить. В В этом случае мы запомним ссылки и ссылки на изображения - только для пример.

<a href="http://x.y.com/path/to/image.jpg" 
data-info="external image">Link to image on another server</a>

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

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}