1. дома
  2. Вопрос и ответ
  3. Что разница между следующими селекторами CSS

Что разница между следующими селекторами CSS

2013-02-22 3 views
-1 
a[attribute~=val]{ 
} 


a[attribute|=val]{ 
} 


a[attribute*=val]{ 
}

обычно я использую последний .. но чем разница между всеми нимиЧто разница между следующими селекторами CSS

источник

2013-02-22 BlackFire27

+4

Не было бы проще просто [посмотреть на спецификацию] (http://www.w3.org/TR/selectors/#attribute-selectors)? –

+0

Я прочитал их ... но есть перекрытие в их использовании. Я могу просто придерживаться этого атрибута [attribute * = val] вместо того, чтобы использовать этот атрибут [attribute ~ = val], например – BlackFire27

+1

Да, вы могли бы, но это зависит от того, насколько вы конкретно хотите быть. '[attribute * = val]' будет соответствовать "somethingval", но '[attribute ~ = val]' не будет. –

ответ

1

Атрибут содержит селектор слов ~= найдет слово, разделенное пробелами. Например, он найдет "Jon" в "Jon Peters", но не в "Jonathan Peters".

Атрибут содержит селектор префикса |= найдет префикс, разделенный тире. Он, например, найдет "en" в "en-GB", но не в "english" или "kal-en".

Атрибут содержит селектор *= найдет текст в любом месте внутри значения атрибута.

источник

2013-02-22 11:12:26 Guffa

+0

первый очень странный. Я не знаю, зачем мне это нужно, если я могу использовать только последний: a [attribute * = 'Jon'] вместо [attribute ~ = 'Jon'] – BlackFire27

+0

@ BlackFire27: Это полезно, когда вы хотите совместить целые слова , а не найти частичные слова, например не укладывая животное как рыбу, потому что вы находите '' треску'' в ''крокодиле' '. – Guffa

1 
a[attribute~=val]

Соответствует a элемент с attribute атрибутом, значение которого содержит слово «val», ограниченное пробелами.

a[attribute|=val]

Соответствует a элемент с атрибутом attribute, значение которого в точности «VAL», или начинается с «Val-».

a[attribute*=val]

Соответствует a элемент с атрибутом attribute, значение которого содержит строку «VAL».

Вы бы, возможно, нашли это очень легко: reading the CSS selectors specification.

источник

2013-02-22 11:09:01

+0

Итак, каково различие между [атрибутом | = val] и [attribute^= val] и примерно первым синтаксисом, то пространство должно быть разделителем val – BlackFire27

+0

@ BlackFire27 - '[attribute^= val]' соответствует, если значение * начинается с * "val". '[attribute | = val]' соответствует, если значение * равно * "val" или начинается с "val-" (обратите внимание на символ дефиса). Для первого значение может быть точно «val» или содержать слово «val». Но опять же, прочитайте спецификацию. Это хорошо объясняет это. –

Смежные вопросы

 Смежные вопросы