问题描述
我有一个结构化的语义数据，我想显示，CSS样式。下面是一个示例：
...< user name =John> ...< / user> ...
我想要这样渲染：
...
用户John ...
...
如果我想User和John有相同的颜色，我可以使用下面的CSS：
user：before {
content：'User'attr（name）;但是，我想让User为蓝色，John为New。是红色。我如何用CSS实现这个？
我不想变换我的数据表示。我知道我可以很容易地获得这样的格式化通过转换数据具有额外的div等，但我想直接显示我的纯语义数据的形式。
解决方案如果 user 元素为空，您可以使用以下CSS：
user :: before {content：User; color：blue;}
user :: after {content：attr（name）; color：red;}
如果 user 元素包含内容，您可以使用：
user :: before {content：User;颜色：蓝色; float：left; margin-right：0.5em;}
user :: after {content：attr（name）;颜色：红色float：left; margin-right：0.5em;}
（使用 float 获取User John字符串后面的元素内容;使用 margin 在字之间获取空格;可能有更简单的方法来修复这些内容） p>
I have a structured semantic data that I would like to display, styling it with CSS. Here is a sample:
...<user name="John">...</user>...
I would like it to be rendered like this:
...
User John ...
...
If I wanted 'User' and 'John' to have the same color, I could use the following CSS:
user:before{
content: 'User ' attr(name);
}
However, I want 'User' to be blue, and 'John' to be red. How can I achieve this with CSS?
P.S. I don't want to transform my data representation. I know I could easily get such formatting by transforming the data to have extra divs, etc, but I would like to display my pure semantic data directly in the form it is.
解决方案 If the user element is empty, you could use the following CSS:
user::before {content:"User "; color:blue;}
user::after {content:attr(name); color:red;}
If the user element contains content, you may use:
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;}
(using float to get the element content behind the "User John" string; using margin to get whitespace between the words; there are probably neater ways to fix those things)
这篇关于CSS：前内容两种颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！