CSSルールを、クラスの1つが指定されたプレフィックスと一致するすべての要素に適用したい。
たとえばstatus-、次のスニペットでは、（AとCで始まるが、Bではない）クラスを持つdivに適用されるルールが必要です。
<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>
ある種の組み合わせ：
div[class|=status]とdiv[class~=status-]
CSS 2.1で実行できますか？CSS仕様で実行できますか？
注：私は、jQueryを使用してそれをエミュレートできることを知っています。
回答:
CSS2.1では実行できませんが、CSS3属性の部分文字列マッチングセレクター（IE7 +でサポートされています）では可能です。
div[class^="status-"], div[class*=" status-"]2番目の属性セレクターのスペース文字に注意してください。これにより、次のいずれかの条件を満たす属性divを持つ要素が取得されclassます。
[class^="status-"] —「ステータス-」で始まる
[class*=" status-"]—スペース文字の直後に出現するサブストリング「status-」が含まれます。クラス名は、HTML仕様に従って空白で区切られているため、重要なスペース文字になります。これは、チェック最初の後に他のクラスを複数のクラスを指定し、されている場合や、属性値はスペースが詰め（出力があることいくつかのアプリケーションで発生する可能性がある場合には最初のクラスを確認するのボーナスが追加されclass、動的属性）。
もちろん、これはjQueryでも機能します。
上記のように2つの属性セレクターを組み合わせる必要がある理由は、などの属性セレクター[class*="status-"]が次の要素と一致するためです。
<div id='D' class='foo-class foo-status-bar bar-class'></div>このようなシナリオが絶対に起こらないようにできる場合は、簡単にするためにこのようなセレクターを自由に使用できます。ただし、上記の組み合わせははるかに堅牢です。
HTMLソースまたはマークアップを生成するアプリケーションを制御している場合は、Gumboが提案するように、status-プレフィックスを独自のstatusクラスにするだけの方が簡単な場合があります。
[class*=" anim-overlay-"] a:hover:after{...}。私のCSSクラスはanim-overlay-1、anim-overlay-2... ...anim-overlay-8
.anim-overlay-*{...}ますか？
CSS属性セレクターを使用すると、文字列の属性を確認できます。（この場合-クラス名）
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
（実際には、2.1と3では「推奨」ステータスになっているようです）
これが私がそれがどのように機能するかを考える方法の概要です：
[ ]：複雑なセレクターのコンテナーです。 class： 'class'は、この場合に見ている属性です。* ：修飾子（存在する場合）：この場合-「ワイルドカード」は、一致するものを探していることを示します。test- ：属性の値（1つあると仮定）-文字列 "test-"（何でもかまいません）を含みますしたがって、たとえば：
[class*='test-'] {
color: red;
}
正当な理由がある場合は、要素も使用して、より具体的にすることができます
ul[class*='test-'] > li { ... }
エッジケースを見つけようとしましたが、^andの組み合わせを使用する必要はありません*。
例：http : //codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
IE6を超えるものはすべて喜んで従います。：）
ご了承ください：
[class] { ... }
クラスで何でも選択します...
[class*='test-']などの要素に一致します<div class='foo-test-bar'>。これは、私の回答で説明されているように、^と*を組み合わせる必要がある1つのエッジケースです。また、IE6は属性セレクターをサポートしていません。
これはできません。-記号まで完全にまたは部分的に一致する属性セレクターが1つありますが、複数の属性があるため、ここでは機能しません。あなたが探しているクラス名が常に最初になるなら、あなたはこれを行うことができます：
<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>
</body>
</html>
これは、どのCSS属性セレクターが最も近いかを指摘するだけであることに注意してください。JavaScriptが属性を操作できるため、クラス名が常に前にあると想定することはお勧めしません。
status-、それを一致させたくない場合、セレクターはさらに複雑になりdiv[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-)ます。さらに、IE7 / IE8のサポートが失われます。ありがたいことに、マークアップが正常であれば、そのようなクラスを除外する必要はありません。