我正在尝试样式化html代码,但是const htmlContent里面的css of style标签不适用于下面的html代码。有没有其他更简单的替代方法来做这个。没有样式工作
const htmlContent = `
<style>
table tr:hover {
background-color: #f5f5f5;
}
</style>
<header style="padding: 20px; text-align: center;position: relative">
<div class="contact-info" style="position: absolute; margin-top: 21px; margin-right: 25px; top: 0; right: 0; font-family: Arial, sans-serif; font-size: 13px; color: #fff; text-align: right;">
Contact: +91-8491064038, +91-9622259639<br>
Email: info@azeestravels.com
</div>
<div style ="padding: 20px;text-align: center;background-color: #333;">
<h1 style="display: inline-block;font-family: Arial, sans-serif; font-size: 48px; font-weight: bold; margin: 0; color: #333; text-shadow: 2px 2px #ccc; background-image: linear-gradient(to bottom, #ffcc00, #ff6600); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Azees Travel</h1>
<p id="tag" style="font-family: Arial, sans-serif; font-size: 16px; color: white; font-weight: bold;">Dream it, visit it</p></div>
<div>
<p id = "greet" style="font-family: Georgia, serif; font-size: 16px; line-height: 2.5; max-width: 1232px; padding: 30px; background-color: #fff; color: #333; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); margin: 0; margin-top: 10px;"><span id="gretD" style="font-size:29px">
Greetings from Azees Travel!</span><br>
Great to hear you are interested in visiting Kashmir.You can take a look at our scheduled upcoming tour for you. All of our Kashmir Tours include visits to Pahalgam, Gulmarg,
Sonamarg and Srinagar.It also includes accommodation and transfers, when you arrive from airport and depart to Airport.We use quality accommodation throughout the tour and make
use of new air-conditioned 4-wheelers. You are in good hands with our certified speaking guides all of whom work for us full time.We guarantee every tour and are committed to
making sure you have a great experience. We wish you a very happy journey and we would love to make your trip more comfortable and enjoyable.Team AZEES TRAVEL wishes you a great
journey & we would love to hear from you upon final package confirmation.
Thank you .....!</p>
</div>
<h3 style="text-align:left;color: red; text-decoration: underline;">Summary:</h3>
<table style="border-collapse: collapse; width: 100%; margin-bottom: 20px; background-color: #f8f8f8; font-size: 16px; color: #333;">
<tr>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;"><Tour Duration:</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">5 Days</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Adults:</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">8</td>
</tr>
<tr>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Tour Start Date:</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">April 1, 2023</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Kids:</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">8</td>
</tr>
</table>
<h3 style="text-align:left;color: red; text-decoration: underline;">The Travel Itinerary:</h3>
</header>
</form>`;
2条答案
按热度按时间e5nqia271#
两件事:
1.您看不到颜色变化,因为
td
在tr
前面,从而使背景变得模糊1.内联样式具有更高的特异性,并且将始终覆盖样式(因此不建议使用它们)
修复:
添加
td
可修复遮挡问题添加
!important
可修复内联样式问题sxissh062#
正如注解所暗示的,td丢失了。但是还要在css中添加!important,否则它不会覆盖表格中使用的背景色