Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 选项元素中的多种样式_Html_Css - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html 选项元素中的多种样式

Html 选项元素中的多种样式

html css

Html 选项元素中的多种样式,html,css,Html,Css,可能重复： 我想知道是否可以在选项元素中应用两种样式？例如，在我下面的代码中，我希望我的产品名称是样式颜色：黑色而价格是另一种款式颜色：红色；字体大小：粗体。我尝试过将我的价格包装在span.price上，但没有成功 <select> <option>Apple <span class="price">$1.00</span></option> <option>Banana <span class="pri

可能重复：

我想知道是否可以在
选项
元素中应用两种样式？例如，在我下面的代码中，我希望我的产品名称是样式
颜色：黑色而价格是另一种款式
颜色：红色；字体大小：粗体。我尝试过将我的价格包装在span.price上，但没有成功


<select>
  <option>Apple  <span class="price">$1.00</span></option>
  <option>Banana <span class="price">$2.50</span></option>
  <option>Cherry <span class="price">$1.50</span></option>
</select>




苹果1.00美元
香蕉2.50美元
樱桃1.50美元

在HTML文档中或外部样式表中尝试此CSS（如果将
标记放在外部样式表中，请将其去掉）：



选择选项{颜色：黑色；}
选择选项span.price{颜色：红色；字体重量：粗体；}



这样做，基本上就是说“我的选择中的所有选项都应该有黑色文本颜色”。然后，您通过说“我的选择中的选项中包含“price”类的任何跨距都应具有红色文本颜色”来覆盖它。
选项
样式是以平台固有的方式设置的。如果不更改标记（和/或使用JavaScript），您就无法做您想做的事情。
这就是我的想法：（感谢您验证我的直觉。@Diodeus抱歉，我错过了那条线索：(

<style type="text/css">
select option { color: black; }
select option span.price { color: red; font-weight:bold; }
</style>