2

表示したい構造化されたセマンティックデータがあり、CSSでスタイルを設定しています。サンプルは次のとおりです。

...<user name="John">...</user>...

次のようにレンダリングしたいと思います。

...
User John ...
...

「ユーザー」と「ジョン」の色を同じにしたい場合は、次のCSSを使用できます。

user:before{
  content: 'User ' attr(name);
}

ただし、「ユーザー」を青、「ジョン」を赤にします。CSSでこれをどのように達成できますか？

PSデータ表現を変換したくありません。データを変換して追加のdivなどを作成することで、このようなフォーマットを簡単に取得できることはわかっていますが、純粋なセマンティックデータをそのままの形式で直接表示したいと思います。

4

2 に答える 2

4

要素が空の場合user、次の CSS を使用できます。

user::before {content:"User "; color:blue;}
user::after {content:attr(name); color:red;}

user要素にコンテンツが含まれている場合は、次を使用できます。

user::before {content:"User "; color:blue; float:left; margin-right:0.5em;}
user::after {content:attr(name); color:red; float:left; margin-right:0.5em;}

( float「User John」文字列の背後にある要素のコンテンツを取得するために使用marginします。単語間の空白を取得するために使用します。これらの問題を修正するためのより適切な方法がおそらくあります)

于 2013-01-12T16:41:13.337 に答える
2

CSS では、pseudoのコンテンツの一部を異なるスタイルにすることはできません。どこか:beforeに追加の要素（ a など）が必要です。と(および全体としてのコンテンツ) は例外ですが、それはあなたが達成したいことではありません。span:first-letter:first-line:before

于 2013-01-12T00:34:32.430 に答える