Question

以下是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>

但是我想在Selected标签中使用样式以及字体大小和族。但如果我这样做，颜色样式不起作用。我这样想;

<!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>

有什么想法吗？

Answer 1

style属性使用不正确。

这就是你所拥有的：

<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;}'>

您只能在style属性中插入样式。您包括选择器（类）。那是无效的。

3. Syntax and Parsing

style属性的值必须与内容的语法相匹配   一个CSS声明块（不包括分隔括号）。

使用文档的head部分或外部样式表来定义选择器。

<head>

<style>

  .Orange{color:Orange;}
  .Red{color:Red;}
  .Green{color:Green;}

</style>

</head>

Answer 2

保留<head><style>标记中颜色的样式。您不能使用元素的style属性来定义CSS类。字体系列等将从父元素继承，因此<option>将继承<select>中的字体。

Answer 3

首先，Style属性内联html标记未正确使用

如果你想使用类，那么使用其他类型的CSS，如内部和外部

您不使用内联样式属性中的类

<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;}'>

但您可以使用以下方法

<!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>

Answer 4

在样式标记中，您不能包含类：

style='font-family : Arial; font-size : 10px; .Orange{color:Orange;}.Red{color:Red;}.Green{color:Green;}'

这就是它无法正常工作的原因。

<!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>

尝试添加，如代码段所示。

内联HTML样式不起作用？

4 个答案: