有什麼區別:|=
和^=
在css中?| =和^ = css之間的區別
由於這個鏈接,它不是一個,但他們爲什麼會打擾兩件事是重複的。 http://www.w3schools.com/cssref/css_selectors.asp
[屬性| =值]和[屬性^ =值]
首先具有
選擇每一個元素,它的src屬性值始於 「HTTPS」
第二個有
個選擇與郎所有元素屬性值開始「EN」
有什麼區別:|=
和^=
在css中?| =和^ = css之間的區別
由於這個鏈接,它不是一個,但他們爲什麼會打擾兩件事是重複的。 http://www.w3schools.com/cssref/css_selectors.asp
[屬性| =值]和[屬性^ =值]
首先具有
選擇每一個元素,它的src屬性值始於 「HTTPS」
第二個有
個選擇與郎所有元素屬性值開始「EN」
我覺得W3C文檔中的官方介紹說,這一切:
E[foo|="en"]
- 的E元素foo的屬性值是一個連字符開頭值的分隔列表EN
E[foo^="bar"]
- 的E元素foo的屬性值開始正好與字符串「bar」
Always try to avoid using w3schools - it has very poor quality。
要獲得好的文檔,請轉到MDN或Sitepoint或使用官方W3C Document。
基本上|=
選擇器是與化合物的類和屬性的語言有用。
<div class="wrapper-inner"><span lang="en-GB">...</span></div>
div[class|='wrapper']{/*...*/}
span[lang|='en']{/*...*/}
^=
更一般選擇「字符串匹配」喜歡你的屬性的第一個字母。
你能否爲此提供官方文檔鏈接? – 2013-03-28 09:21:13
參考https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors。官方網址:http://www.w3.org/TR/css3-selector/#attribute-selectors – 2013-03-28 09:21:16
我會授予你選中的答案,儘管兩個答案都是正確的,但你的答案更加完整。 – 2013-03-28 09:23:47
W3Schools的不是知識(check that site)的良好來源。你應該依靠官方CSS specification:
E[foo^="bar"]
的E元素「foo」的屬性值開始正好與字符串「bar」
E[foo|="en"]
的E元素「foo」的屬性有值的連字符隔開的列表開始(從左側)與「EN」用法
實例:
以下選擇器表示的量,值的元件的 hreflang屬性開頭 「EN」,包括 「連接」, 「EN-US」,和 「EN-利物浦式」:
a[hreflang|="en"]
以下選擇表示HTML對象,引用一個 圖像:
object[type^="image/"]
爲什麼在W3C官方文檔發佈時使用w3schools?
E[foo^="bar"]
的E元素 「foo」 的屬性值完全開始字符串 「bar」(屬性選擇CSS3)
E[foo|="en"]
的E元素爲「foo 「屬性具有以」en「(屬性選擇器CSS2)開頭(從左側開始)的以連字符分隔的值列表
請檢查以下示例。你會在兩個選擇器之間得到更好的理解。
/* 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>
你不應該使用W3Schools的作爲源!看看[W3Fools](http://w3fools.com/) – MarcinJuraszek 2013-03-28 09:20:55
是的,但由於谷歌的搜索引擎優化,我不斷從第一頁搜索他們。 – 2013-03-28 09:24:37
我知道這一點。然而,下次你會知道你應該跳過搜索結果中的這些鏈接:) – MarcinJuraszek 2013-03-28 09:26:05