如何更改把手标题和属性值的颜色？

Question

我有以下清单：

<li>Equipment Area:{{equipment_area}}</li>
<li>Equipment Type: {{equipment_type}}</li>
<li>Manufacturer: {{manufacturer}}</li>
<li>Model Number: {{model_number}}</li>
<li>Serial Number: {{serial_number}}</li>
<li>Service: {{service}}</li>
<li>Capacity: {{capacity}}</li>
<li>Comments: {{general_comments}}</li>
<li>Total Cost: {{total_of_new_installation}}</li>

一旦尝试将标题的字体颜色更改为蓝色，我添加了一些内联样式：

<li style="blue">Equipment Area:{{equipment_area}}</li>

但是，当我输入如上所示的内联样式时，整个列表项（标题和相关值）变为蓝色。

我希望标题为蓝色，模板值为白色。如何做到这一点？

Answer 1

你可以这样试试：

<li style="blue">Equipment Area:<p style="color: white;">{{equipment_area}}</p></li>

Answer 2

将每个部分包装在 span 中并给它一个类，如下所示：

<li>
   <span class="list-title">Equipment Area:</span>
   <span class="list-value">{{equipment_area}}</span>
</li>

然后您可以根据需要设置每个类的样式...

Answer 3

使用内联样式，您可以只使用color 属性来指定HTML span tag 内的文本颜色。

<li><span style="color: blue">Equipment Area:</span><span style="color: white">{{equipment_area}}</span></li>
<li><span style="color: blue">Equipment Type:</span><span style="color: white">{{equipment_type}}</span></li>
<li><span style="color: blue">Manufacturer:</span><span style="color: white">{{manufacturer}}</span></li>
<li><span style="color: blue">Model Number:</span><span style="color: white">{{model_number}}</span></li>

为了避免重复（到每个行项添加内联样式），最好在 CSS 中将标题和属性类添加到跨度和样式中，像这样

.title {
  color: blue;
  }

.value {
  color: white;
  }
  
.title:hover {
  color: red;
  }

<li>
  <span class="title">Equipment Area:</span>
  <span class="value">{{equipment_area}}</span>
</li>

<li>
  <span class="title">Equipment Type:</span>
  <span class="value">{{equipment_type}}</span>
</li>

<li>
  <span class="title">Manufacturer:</span>
  <span class="value">{{manufacturer}}</span>
</li>

<li>
  <span class="title">Model Number:</span>
  <span class="value">{{model_number}}</span>
</li>

（当您将鼠标悬停在标题上时，sn-p 已更新为将标题颜色更改为红色）