CSS [屬性| =值] VS [屬性* =值]選擇

Question

爲什麼我們需要CSS [attribute|=value] Selector在所有時候CSS3 [attribute*=value] Selector基本完成同樣的事情，瀏覽器兼容性幾乎相似？有沒有什麼是第一個CSS選擇器，第二個不能？這是第一次遇到兩個非常相似的選擇器，並想知道爲什麼第一個存在於首位。

Answer 1

他們是截然不同的：

[attr|=value]

表示使用attr的屬性名的元素。它的值可以完全是「值」，或者可以以「值」開始，緊接着是「 - 」（U + 002D）。它可以用於語言子代碼匹配。

[attr*=value]

表示具有的ATTR的屬性名的元素和值中包含字符串「值」爲子串中的至少一個發生。

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 2

從DOC：

[ATTR | =值]表示使用attr的屬性名的元素。 它的值可以完全是「值」，或者可以立即以「值」開始，後面跟着「 - 」（U + 002D） 。它可以用於語言子代碼匹配。

[ATTR * =值]表示的ATTR屬性名和 值中包含字符串「值」爲 子串的至少一個發生的元素。

視覺差異：

[ATTR | =值]

/* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */ 
 
span[lang|="zh"] {color: red;}

<span lang='zh'>zh</span>

[ATTR * =值]

/* All links to with "example" in the url have a grey background */ 
 
a[href*="example"] {background-color: #CCCCCC;}

<a href="www.example.com">example<a/>

在相同的代碼例如：

div[color|="red"] { 
 
    background: red; 
 
} 
 
div[color*="blue"] { 
 
    color: blue; 
 
}

<div> 
 
    <div color='red-yellow'>This shoud has only red background</div> 
 
    <div color='blue'>This shoud has only blue color</div> 
 
    <div color='red-blue'>This shoud has blue color and red background</div> 
 
    <div color='blue-red'>This shoud be only blue color</div> 
 
</div>

參考

Attribute selectors

Answer 3

有很多這兩個選擇器

[lang|=en] { 
 
    background: yellow; 
 
} 
 

 
[lang*=en] { 
 
    color:red; 
 
}

<p lang="en">Hello!</p> 
 
<p lang="en-us">Hi!</p> 
 
<p lang="en-gb">Ello!</p> 
 
<p lang="usen">Hi!</p> 
 
<p lang="noen">Hei!</p> 
 

 
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

1. 的之間的差異[屬性| =值]選擇器用於選擇具有指定的屬性起始元件與指定的值。

2. [attribute * = value]選擇器匹配其屬性值包含指定值的每個元素。

見的例子，以獲取有關這兩個選擇一個清晰的概念。

Answer 4

第一個選擇器確保屬性值以提交的值開始，第二個選擇器只需要包含它的屬性值。

如果必須區分在同一屬性中不同位置具有相同字符串的屬性，這將會很有幫助。

Answer 5

CSS隨着時間的推移已經發展，並且隨着更多選擇器的需求和需求的發展，功能也不斷增加。

CSS [attribute | = value]選擇器在CSS3（最新版本）之前定義，並且在CSS 2.1中可用。正如指出的頁面鏈接到您：

用於選擇與指定的屬性元素開始與指定的值。

雖然這在大多數情況下非常方便，但有時候會有框架，它的類定義中包含了來自someString_somethingUseful_somethingElse的結構化css。

現在說我想選擇其中somethingUseful位的所有元素。上面的選擇器不允許我這樣做，因爲位於類名中間的類定義的somethingUseful位。與somethingElse位相同，它位於最後。

因此，在CSS3，我們看到引進[屬性* =值]選擇這使我們能夠選擇可以具有這些關鍵字作爲其定義一個子元件（儘管不一定是在前面）看的：

選擇器的每一個元素，其屬性值含有指定值相匹配。