Html 如何更改文本中带有 * 的标签颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23691152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:49:02  来源:igfitidea点击:

How can I change the color of label with * in text

htmlcss

提问by user1994660

I have labels like this

我有这样的标签

<label> User Type*: </label>

<label> User Type*: </label>

Now is there any way to change the color of label to red if text contains * in it only with CSS

现在有什么方法可以将标签的颜色更改为红色,如果文本中包含 * 仅使用 CSS

All I can do is edit css. I can't use Javascript.

我所能做的就是编辑css. 我不能使用 Javascript。

回答by kennypu

No, without javascript you won't be able to style only the *. what you will need to do is to put the *in its own element, and style that element.

不,如果没有 javascript,您将无法仅设置*. 您需要做的是将 放入*它自己的元素中,并设置该元素的样式。

Example:

例子:

HTML

HTML

<label> User Type<span>*</span>: </label>

CSS

CSS

label span { color: red; }

example fiddle: http://jsfiddle.net/Ee9L3/

小提琴示例:http: //jsfiddle.net/Ee9L3/

EDIT: looks like i misread the question. No there's no way to do what you want. The easiest alternative would be to just add a class to the label.

编辑:看起来我误读了这个问题。不,没有办法做你想做的事。最简单的替代方法是向标签添加一个类。

HTML

HTML

<label class='required'>User Type*: </label>

CSS

CSS

label.required { color: red; }

回答by Seanevd

There is no way to change only the * in CSS. I would recommend doing something like this:

无法仅更改 CSS 中的 *。我会建议做这样的事情:

<label> User Type<span class="red">*</span></label>

<label> User Type<span class="red">*</span></label>

If you can't change the HTML, you may be out of luck. I guess you could do something like this in your CSS:

如果您不能更改 HTML,那么您可能就不走运了。我想你可以在你的 CSS 中做这样的事情:

label:after {
   content: "*";
   color: red;
}

回答by b_uk_happy

Sorry but - If you can't edit the html and can't use javascript - there is no way to do this with just css (yet?!)

抱歉 - 如果你不能编辑 html 并且不能使用 javascript - 没有办法只用 css 来做到这一点(还有?!)

回答by nhavar

CSS3 had a very short-lived :contains() pseudo class if I remember correctly. Unfortunately it has been removed from the spec and there is no way to do this with CSS alone.

如果我没记错的话,CSS3 有一个非常短暂的 :contains() 伪类。不幸的是,它已从规范中删除,单独使用 CSS 无法做到这一点。

IE had a means of attaching JavaScript behaviors to CSS using .HTC files. However, that only works in IE and not in any other browser, so it's not a good answer.

IE 有一种使用 .HTC 文件将 JavaScript 行为附加到 CSS 的方法。但是,这只适用于 IE 而不适用于任何其他浏览器,所以这不是一个好的答案。

You would need some sort of JavaScript or access to the HTML itself. That's the only way. Sorry.

您需要某种 JavaScript 或访问 HTML 本身。这是唯一的办法。对不起。

回答by Carlos J.

This is easy. This is a mixture of previous answers.

这很简单。这是以前答案的混合。

HTML:

HTML:

<label class='required'>Direcció <span class="red">*</span></label>

CSS:

CSS:

label.required>span.red{ color: red; }