内联HTML样式不起作用?

时间:2017-10-06 12:44:32

标签: html css

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

有什么想法吗?

4 个答案:

答案 0 :(得分: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>

答案 1 :(得分:2)

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

答案 2 :(得分:2)

首先,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>

答案 3 :(得分:1)

在样式标记中,您不能包含类:

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>

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