[英]How to change color for links (href text) in thymeleaf?
我在 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;
}
Output:
Product Code, Product Name and product Price 都是白色的。 Add to Cart
葯水除外。 我的背景有藍色圖像。 我想讓Add to Cart
的鏈接以白色顯示。 怎么做?
簡單地,
您可以向<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.