Question

css中的|=和^=之间有什么区别？

由于这个链接它不是一个，但为什么他们会打扰两件事重复。 http://www.w3schools.com/cssref/css_selectors.asp

[attribute | = value]和[attribute ^ = value]

首先有

选择src属性值以其开头的每个元素 “HTTPS”

第二个

选择具有以“en”
开头的lang属性值的所有元素

Answer 1

我认为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']{/*...*/}

^=通常选择“子字符串匹配”，就像属性的第一个字母一样。

Answer 2

为什么在W3C的官方文档出现时使用w3schools？

W3C CSS3 Selectors

W3C CSS2 Selectors

E[foo^="bar"]一个E元素，其中＆＃34; foo＆＃34;属性值恰好以字符串＆＃34; bar＆＃34;开头。（属性选择器CSS3）

E[foo|="en"]一个E元素，其中＆＃34; foo＆＃34;属性具有以连字符分隔的值列表（从左侧开始），使用＆＃34; en＆＃34; （属性选择器CSS2）

Answer 3

w3schools不是一个很好的知识来源（check that site）。你应该依靠官方CSS specification：

E[foo^="bar"]一个E元素，其“foo”属性值恰好以字符串“bar”开头

E[foo|="en"]一个E元素，其“foo”属性具有以连字符分隔的值列表（从左侧开始），带有“en”

用法示例：

以下选择器表示其值为的元素   hreflang属性以“en”开头，包括“en”，“en-US”和   “烯利物浦式”：

a[hreflang|="en"]

以下选择器表示引用的HTML对象   图像：

object[type^="image/"]

Answer 4

请查看以下示例。您将在两个选择器之间获得更好的理解。

/* 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>

| =和^ = css之间的区别

4 个答案: