CSS_属性选择器

【name】
{

}

以上是普通的属性选择器

属性和值选择器

【name=value】
{

}

区别在于指定的一个值。

然后是~和|

[title~=hello]
{
	color:blue;
} 

<h2>将适用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>将不适用:</h2>
<p title="student">Hi CSS students!</p>

[lang|=en]
{
	color:blue;
}
<h2>将适用:</h2>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<hr>
<h2>将不适用:</h2>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>

我的理解是~选择器只需要值中有一个是所需的即可，不需要这个值位于首位。

而|则是需要用—分割各值，并且需要位于首位。

这个地方留疑问，很不明白。