HTML代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介</title>
<link rel="stylesheet" href="css/bookStyle.css">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/book.js" ></script>
</head>
<body>
<section id="book">
<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
<p class="intro">自营图书几十万畅销品种阶梯满减,抽奖赢魅蓝note3、JDRead阅读器!</p>
<p id="author">[美] 加·泽文(Gabrielle Zevin) 著;孙仲旭,李玉瑶 译</p>
<div class="price">
<div id="jdPrice">京东价: <span>¥24.10</span> [6.9折] <p>[定价:<span>¥35.00</span>]
</p> (降价通知)</div>
<p id="mobilePrice">促销信息:<span>手机专享价</span> <span>¥9.90</span></p>
<dl>
<dt>以下促销可在购物车任选其一</dt>
<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
<dd><span>满减</span> 满100.00减20.00,满200.00减60.00,满300.00减100.00</dd>
</dl>
<p id="ticket">领 券:<span>105-6</span> <span>200-16</span></p>
</div>
</div>
</section>
</body>
</html>
JavaScript代码:
$(function(){
//后代选择器
$(".textRight p").css("color","aqua");
//子类选择器
$(".textRight> p").css("color","darkmagenta");
//相邻选择器
$("h1+p").css("text-decoration","underline");
//同辈选择器
$("h1~ p").css("color", "yellow");
})