空でない属性を持つ要素を選択します

CSSセレクターを使用して、空でない属性を持つ要素を選択します

簡単な答え：

 [data-foo]：not（[data-foo = ""]）{}

詳細な説明：（結論は同じです。なぜこれを行う必要があるのか​​を説明するだけです）

スタイルに特別なdata-プロパティを使用する要素があるとします。

<div data-highlight="product">
</div>

要素を見つけて、強調表示されたときに特別なアクションを実行します。

 [データハイライト] {
  フォントサイズ：125％; 
}

[data-highlight = "product"] img {
  注文：1;
}

data-プロパティはテンプレートの一部であるため、設定した値を持つことができます。

<div data-highlight="{{ value }}">
</div>

時々価値がありません！したがって、出力HTMLは次のとおりです。

<div data-highlight="">
</div>

しかし、これは難しい場合があります。上記の最初のCSSコードブロックを参照してください。 data-highlight属性を持つすべての要素を見つけたいが、実際には、値がある場合にのみこれを行いたいと考えています。値が空の場合は、特別なスタイルをスキップしたいだけです。

理想的には、値がない場合は、HTMLテンプレートからdata-プロパティを削除するだけです。しかし、多くのテンプレート言語では、意図的にその属性を完全に追加するかどうかに役立つロジックは許可されていません。

代わりに、CSSを使用して解決できます。

 [データハイライト]：not（[data-highlight = ""]）{
  フォントサイズ：125％; 
}

[data-highlight = "product"] img {
  注文：1;
} 

以上が空でない属性を持つ要素を選択しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。