javascript - 如何更改百里香中链接（href 文本）的颜色？

Question

我在 Thymeleaf 页面中有以下链接（href）。

<div class="product-preview-container"
    th:each="prodInfo : ${products}">
    <ul>
        <li>Product Code:  <span th:utext="${prodInfo.productCode}"></span></li>
        <li>Product Name:  <span th:utext="${prodInfo.productName}"></span></li>
        <li>Product Price: Rs <span th:utext="${prodInfo.productPrice}"></span></li>
        <li><a th:href="@{|/shopping/buyProduct?code=${prodInfo.productCode}|}" th:color="white">Add to Cart</a></li>
    </ul>
</div>

CSS

.product-preview-container {
    border: 1px solid #ccc;
    padding: 5px;
    width: 250px;
    margin: 10px ;
    display: inline-block;
    text-align:left;
    color: white;
}
  
.product-preview-container input {
    width: 50px;
}

输出 ：

产品代码、产品名称和产品价格都是白色的。除了Add to Cart药水。我的背景有一个蓝色的图像。我想让链接Add to Cart显示为白色。怎么做 ？

标签： javascriptjavahtmlcssthymeleaf

Answer 1

简单地，

您可以为标签添加颜色。<a>

.product-preview-container a{
  color: white;
} 

.product-preview-container {
    border: 1px solid #ccc;
    padding: 5px;
    width: 250px;
    margin: 10px ;
    display: inline-block;
    text-align:left;
    color: white;
}
  
.product-preview-container input {
    width: 250px;
}
.bgblue{
    background:#034d89;
    width: 282px;
    /* inner div width+margin+padding+border = 250+1*10+2*5+2*1=282px */
}
.product-preview-container a{
    color: white;
}

<div class="bgblue">
  <div class="product-preview-container" th:each="prodInfo : ${products}">
      <ul>
          <li>Product Code:  <span th:utext="${prodInfo.productCode}"></span></li>
          <li>Product Name:  <span th:utext="${prodInfo.productName}"></span></li>
          <li>Product Price: Rs <span th:utext="${prodInfo.productPrice}"></span></li>
          <li><a th:href="@{|/shopping/buyProduct?code=${prodInfo.productCode}|}" th:color="white">Add to Cart</a></li>
      </ul>
  </div>
</div>