内联 HTML 中的样式不起作用？答案

【问题标题】：Style in inline HTML not working?内联 HTML 中的样式不起作用？
【发布时间】：2017-10-09 16:01:10
【问题描述】：

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

有什么想法吗？

【问题讨论】：

@Hassan Imam：这不会有任何区别。这不是 XHTML。
Using <style> tags in the <body> with other HTML的可能重复
@BoltClock 这不是解决 OP 面临的问题的方法，看到大写的标签和属性名称很奇怪。我已删除该评论，因为它具有误导性。
@Hassan Imam：这就是为什么我告诉你这是正常的。有点过时，但很正常。

标签： html css

【解决方案1】：

保留<head><style> 标记中颜色的样式。您不能使用元素的style 属性来定义CSS 类。 Font-family 等会从父元素继承，所以<option> 会从<select> 继承字体。

【讨论】：

那么在样式中还有其他可以使用的吗？

【解决方案2】：

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>

【讨论】：

那么在样式中还有其他可以使用的吗？

【解决方案3】：

首先Style属性内联html标签没有正确使用

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

你没有使用类inside inline样式属性

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

【讨论】：

【解决方案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>

尝试添加如sn-p所示。

【讨论】：

那么在样式中还有其他可以使用的吗？