内联HTML样式不起作用？
[英]Style in inline HTML not working?
问题描述
Below is the code for selected option in HTML which is working: 
以下是有效的HTML中选定选项的代码：
<!DOCTYPE html>
<html>
<head>
<style>
.Orange{color:Orange;}
.Red{color:Red;}
.Green{color:Green;}
</style>
</head>
<body>
<SELECT id='select' NAME='select' class="form-select" OnChange='this.className=this.options[this.selectedIndex].className' style='font-family : Arial; font-size : 10px; '>
<OPTION CLASS = 'null' VALUE='' TITLE='' style = 'color:null' SELECTED>
<OPTION CLASS = 'Red' VALUE='108R675' TITLE='Red' >Red
<OPTION CLASS = 'Green' VALUE='108R723' TITLE='Green' >Green
<OPTION CLASS = 'Green' VALUE='108R725' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='108R726' TITLE='Orange' >Orange
<OPTION CLASS = 'Green' VALUE='109R642' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='109R754' TITLE='Orange' >Orange </SELECT>
</body>
</html>
But I want to use the style within Selected tags along with font size and family. 但是我想在Selected标签中使用样式以及字体大小和字体。 But if I do that the color style is not working. 但是，如果我这样做，则颜色样式将无法正常工作。 I am trying like this; 我正在这样尝试；
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<SELECT id='select' NAME='select' class="form-select" OnChange='this.className=this.options[this.selectedIndex].className' style='font-family : Arial; font-size : 10px; .Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'>
<OPTION CLASS = 'null' VALUE='' TITLE='' style = 'color:null' SELECTED>
<OPTION CLASS = 'Red' VALUE='108R675' TITLE='Red' >Red
<OPTION CLASS = 'Green' VALUE='108R723' TITLE='Green' >Green
<OPTION CLASS = 'Green' VALUE='108R725' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='108R726' TITLE='Orange' >Orange
<OPTION CLASS = 'Green' VALUE='109R642' TITLE='Green' >Green
<OPTION CLASS = 'Orange' VALUE='109R754' TITLE='Orange' >Orange </SELECT>
</body>
</html>
Any idea? 任何想法？
4 个解决方案
解决方案1
2 2017-10-06 12:48:24
The style attribute is being used incorrectly. style属性使用不正确。
This is what you have: 这是您所拥有的：
<SELECT id='select'
NAME='select'
class="form-select"
OnChange='this.className=this.options[this.selectedIndex].className'
style='font-family : Arial; font-size : 10px;
.Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'>
You can only insert styles in the style attribute. 您只能在style属性中插入样式。 You're including selectors (the classes). 您包括选择器（类）。 That's invalid. 那是无效的。
The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces).
Use the head section of the document or an external stylesheet to define selectors. 使用文档的head部分或外部样式表定义选择器。
<head>
<style>
.Orange{color:Orange;}
.Red{color:Red;}
.Green{color:Green;}
</style>
</head>
解决方案2
2 2017-10-06 12:49:53
Keep the styles for the colors in the <head><style> tag. 将颜色的样式保留在<head><style>标记中。 You can not use the style attribute of an element to define CSS classes. 您不能使用元素的style属性定义CSS类。 Font-family etc. will be inherited from the parent element, so the <option> will inherit the font from the <select> . 字体家族等将从父元素继承，因此<option>将从<select>继承字体。
解决方案3
2 2017-10-06 12:52:25
First Of all Style attribute inline html tag are not used proper 首先，不能正确使用所有Style属性的内联html标签
if u want to use class then use other type of CSS like internal, and external 如果您想使用类，请使用其他类型的CSS，例如内部和外部
you do not use class inside inline style attribute 您不使用内联样式属性内的类
<SELECT id='select'
NAME='select'
class="form-select"
OnChange='this.className=this.options[this.selectedIndex].className'
style='font-family : Arial; font-size : 10px;
.Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'>
BUT YOU CAN USE IT BELOW METHOD 但您可以使用以下方法
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.Orange{color:Orange;}
.Red{color:Red;}
.Green{color:Green;}
</style>
</head>
<body>
<SELECT id='select'
NAME='select'
class="form-select Orange Red Green"
OnChange='this.className=this.options[this.selectedIndex].className'
style='font-family : Arial; font-size : 10px;'>
</body>
</html>
解决方案4
1 2017-10-06 12:49:34
In style tag you cannot include classes: 在样式标签中，不能包含类：
style='font-family : Arial; font-size : 10px; .Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'
That is the reason it is not working. 这就是它不起作用的原因。
<!DOCTYPE html> <html> <head> <style> .Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;} </style> </head> <body> <SELECT id='select' NAME='select' class="form-select" OnChange='this.className=this.options[this.selectedIndex].className' style='font-family : Arial; font-size : 10px;'> <OPTION CLASS = 'null' VALUE='' TITLE='' style = 'color:null' SELECTED> <OPTION CLASS = 'Red' VALUE='108R675' TITLE='Red' >Red <OPTION CLASS = 'Green' VALUE='108R723' TITLE='Green' >Green <OPTION CLASS = 'Green' VALUE='108R725' TITLE='Green' >Green <OPTION CLASS = 'Orange' VALUE='108R726' TITLE='Orange' >Orange <OPTION CLASS = 'Green' VALUE='109R642' TITLE='Green' >Green <OPTION CLASS = 'Orange' VALUE='109R754' TITLE='Orange' >Orange </SELECT> </body> </html>
Try adding as shown in snippet. 尝试如代码片段所示进行添加。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.