在CSS属性选择器中[att〜= val]与[att * = val]有何不同？ [英] How exactly is [att~=val] different from [att*=val] in CSS Attribute Selectors?

问题描述

也许我错过了一些东西，但他们似乎相似。如果你使用例如...

  a [alt〜=thumb] 
  

或...

  alt * =thumb] 
  

我在理解〜给你一个部分匹配的报价，而*给你一个部分匹配。我会把代码弄干一点，但是由于我在这里没有找到一个问题，所以它会成为一个好主题。

解决方案

从JQuery帮助（支持标准选择器）：

  a [alt〜 thumb] 
  

说明：选择具有指定属性的元素a
包含给定单词的值，由空格分隔。该选择器
将测试字符串与属性值中的每个字匹配，
其中word被定义为由空格分隔的字符串。
选择器匹配如果测试字符串正好等于任何
字。

  a [alt * =thumb] 
  

描述：使用包含给定子字符串的
值选择具有指定属性的元素。这是最慷慨的
jQuery属性选择器匹配一个值。如果选择器的字符串出现在
元素的属性值中的任何位置，它将
选择一个元素。将此选择器与属性
包含字选择器（例如[attr〜=word]）进行比较，这在许多情况下更适合
。

基本上，选择器〜= 仅匹配如果找到的值被空格包围。 ; div alt ='heading navigation'>
< div alt ='head'>

div [alt〜='head'] 将只匹配第二个div，但 div [alt * ='head'] 将匹配两者。

Maybe I am missing something, but they seem similar. If you use for example...

a[alt~="thumb"]

or...

a[alt*="thumb"]

What can I narrow my selection down to differently? I am at the understanding that ~ gives you a partial match in the quotes while the * gives you a partial match. I am going to fiddle with the code a little, but since I could not find a question on the subject here, thought it would make a good topic either way.

解决方案

From the JQuery help (which supports the standard selectors):

a[alt~="thumb"]

Description: Selects elements that have the specified attribute with a value containing a given word, delimited by spaces. This selector matches the test string against each word in the attribute value, where a "word" is defined as a string delimited by whitespace. The selector matches if the test string is exactly equal to any of the words.

a[alt*="thumb"]

Description: Selects elements that have the specified attribute with a value containing the a given substring. This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~="word"]), which is more appropriate in many cases.

Basically the selector ~= only matches if the value is found surrounded by white space. The selector *= matches if the value is found anywhere.

<div alt='heading navigation'>
<div alt='head'>

div[alt~='head'] would match only the second div, but div[alt*='head'] would match both.

这篇关于在CSS属性选择器中[att〜= val]与[att * = val]有何不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！