パターンE[foo~="bar"]の属性セレクタは、ある要素の属性の値が空白区切りで複数（1つでも）ある場合、その内の一つと完全一致した場合にスタイルが適用されます。

CSS2で定義されている属性セレクタは、いずれも部分一致、前方一致、後方一致としては使えず、特定の条件での完全一致になります。部分一致での適用はCSS3で定義された属性セレクタを使う事で可能です。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

属性セレクタのサンプル

p[class~="attributeText"] {
  text-align: center;
  color: blue;
}

p[class~="attributeText"][class~="attributeArea"] {
  color: green;
}

p[class~="attributeSample"][class~="attributeText"][class~="attributeArea"] {
  color: red;
}

<p class="attributeSample attributeText attributeArea">
センター寄せテキスト01 赤<br />
attributeSample attributeText attributeArea
</p>

<p class="attributeText attributeArea">
センター寄せテキスト02 緑<br />
attributeText attributeArea
</p>

<p class="attributeText attributeArea attributeSection">
センター寄せテキスト03 緑<br />
attributeText attributeArea attributeSection
</p>

<p class="attributeText">
センター寄せテキスト04 青<br />
attributeText
</p>

<p class="attributeSample">
何も適用されないテキスト01<br />
attributeSample
</p>

<p class="attributeSample attributeArea">
何も適用されないテキスト02<br />
attributeSample attributeArea
</p>

<p class="attributeTextArea">
何も適用されないテキスト03<br />
attributeTextArea
</p>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

センター寄せテキスト01 赤
attributeSample attributeText attributeArea

センター寄せテキスト02 緑
attributeText attributeArea

センター寄せテキスト03 緑
attributeText attributeArea attributeSection

センター寄せテキスト04 青
attributeText

何も適用されないテキスト01
attributeSample

何も適用されないテキスト02
attributeSample attributeArea

何も適用されないテキスト03
attributeTextArea

ちょっとごちゃついてますが、まず、センター寄せテキスト01は、全てのセレクタが適用されるためセンター寄せされ一番後の指定のcolor: red;まで適用されます。

次に、センター寄せテキスト02は上2つが適用されるため、センター寄せで緑色になります。

センター寄せテキスト03は、attributeSectionも含まれていますが、attributeTextとattributeAreaが一致するため、センター寄せテキスト02と同様のスタイルが適用されます。

センター寄せテキスト04は、p[class~="attributeText"]と完全一致しているので適用されます。これはp[class="attributeText"]と書いても同じです。

そして、適用されてないテキストについてですが、適用されないテキスト01は、attributeSampleしか値が無いため、いずれのセレクタとも一致しないので適用されません。
適用されないテキスト02も、一致しているようでいずれとも一致していないため適用されず、最後の適用されないテキスト03は、attributeTextと前方一致ですが、パターンE[foo~="bar"]は、前方一致では適用されません。