基本选择器：************************************
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
dd{ display: none;<!--进行隐藏--> }
</style>
</head>
<body>
<section id="book">
<div class="imglift"><img src="../tupian/qq图书.jpg" ></div> <div class="textright">
<h1>岛上书店【荐书联盟推荐】[love you lift xia]</h1>
<p class="intro">自营图书几十万畅销品种；抽奖赢魅蓝note3</p>
<p id="zhang">[美]加。译文（hahahaha）著 孙仲旭 李玉姚 译</p>
<div class="price">
<div class="jdpirce">京东价<span>$24.1</span>[6.9折]<p><span>$35..00</span></p></div>
<p id="mopildprice">促销信息<span>手机专项价</span><span>$40.0</span></p>
<dl>
<dt>以下促销可在购物车内任你选其一</dt>
<dd><span>加够价</span>满一百减90</dd>
<dd><span>满减</span>满一千减999</dd>
</dl>
<p id="ticked">领卷<span>105-6</span><span>200-16</span></p>
</div>
</div>
</section>
<script language="JavaScript" src="../e/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
//全局选择器；所有标记，具有加粗效果
$("*").css("font-weight", "bold");
//标签选择器；h1添加颜色
$("h1").css("color", "blue");
//并集选择器
$(".intro,dt,dd").css("color", "#ff0000");
//id选择器
$("#zhang").css("color", "#083499");
//类选择器
$(".price").css({"background-color": "#efefef", "padding": "5px"});
$("dt").click(function () {
$("dd").css("display", "block");
});
});
</script>
层次选择器****************************************************************8
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<section id="book">
<div class="imglift"><img src="../tupian/qq图书.jpg" ></div>
<div class="textright">
<p>我喜欢夏丽洋</p>
<h1>岛上书店【荐书联盟推荐】[love you lift xia]</h1>
<p class="intro">自营图书几十万畅销品种；抽奖赢魅蓝note3</p>
<p id="zhang">[美]加。译文（hahahaha）著 孙仲旭 李玉姚 译</p>
<div class="price">
<div class="jdpirce">京东价<span>$24.1</span>[6.9折]<p><span>$35..00</span></p></div>
<p id="mopildprice">促销信息<span>手机专项价</span><span>$40.0</span></p>
<dl>
<dt>以下促销可在购物车内任你选其一</dt>
<dd><span>加够价</span>满一百减90</dd>
<dd><span>满减</span>满一千减999</dd>
</dl>
<p id="ticked">领卷<span>105-6</span><span>200-16</span></p>
</div>
</div>
</section>
<script language="JavaScript" src="../e/jquery-3.2.1.min.js"></script>
<script >
$(document).ready(function(){
//空格隔开；是后代选择器； $(".textright p").css("color","red");
//子选择器构成一层嵌套；$(".textright>p").css("color","red");
//相邻选择器,控制相邻的下一个标记；后面的同辈元素 $("h1+p").css("text-decoration","underline");
//同辈选择器；h1后面的同辈元素 $("h1~p").css("background","yellow");
//同辈元素上下都包括的方式 //$("h1").siblings("p").css("background","yellow"); });
</script>
属性选择器********************************************************
<html> <head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<section id="mews">
<header>京东快报<a href="#" class="more" id="haha">更多</a></header>
<ul>
<li><a href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]</span>志玲姐姐：墨镜300减30</a></li>
<li><a href="www.jd.com/news.aspx?id=20257" ><span>[公告]</span>京东无锡馆正式启动</a></li>
<li><a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]</span>99元强平板</a></li>
<li><a href="www.jd.com/news.aspx?id=29252" ><span>[公告]</span>节能领跑京东现行</a></li>
<li><a href="sale.jd.com/act/ugk2973.html" class="last"><span>[特惠]</span>高洁丝实力燎火</a></li>
</ul>
</section>
<script language="JavaScript" src="../e/jquery-3.2.1.min.js"></script>
<script >
$(document).ready(function(){
//属性选择器;是a标签并且含有class属性的进行选择更改 $("#mews a[class]").css("background-color","#c9cbcb");
//含有多个属性的设置 $("#mews a[class][id]").css("background-color","red" );
//指定属性和属性值来获取并设置 $("#mews a[class='last']").css("background-color","yellow");
//指定属性值不等于last的属性进行添加背景颜色 $("#mews a[class!='last']").css("background-color","blue");
//指定属性值以什么开头 $("#mews a[href^='www']").css("background-color","pink");
//指定属性以什么结尾的 $("#mews a[href$='.html']").css("background-color","red");
//指定属性包含什么内容的 $("#mews a[href*='k2']").css("font-size","30px");
});
<script >
</body>
</html>
过滤选择器***********************************************************
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0px;
margin: 0px auto;
}
ul{
padding-left: 5px;
font-size: 12px;
}
ul li{
list-style: none;
line-height: 40px;
border-bottom: 1px dotted #CCC; }
.contain{
border: 1px solid deepskyblue;
height: 300px;
300px; }
h2{
line-height: 30px;
padding-left: 5px;
}
</style>
</head>
<body>
<div class="contain">
<h2>祝福东奥</h2>
<ul>
<li>夏丽洋：衷心的希望你能学成</li>
<li>陌生人：谁会管你；只有自己约束自己</li>
<li>老员工：没人会结识一个没有能力的人</li>
<li>朋友：永远在你繁荣的时候出现</li>
<li>朋友：永远在你落魄的时候给伤害</li>
<li>人型：没有终点；只有更加黑暗</li>
</ul>
</div>
<script language="JavaScript" src="../e/jquery-3.2.1.min.js">
<script>
</script>
$(document).ready(function(e){
//获取标题标记 h1-h6 $(".contain :header").css("background","#2a65ba");
//找到第一个li标记 $(".contain li:first").css("color","#e90202");
//找到最后一个li标记 $(".contain li:last").css("color","blue");
//奇数行添加背景 $(".contain li:odd").css("background-color","#cccccc");
//偶数行添加背景 $(".contain li:even").css("background-color","red");
//给前两个li添加字体颜色 从零开始算；不包含2 $(".contain li:lt(2)").css("color","pink");
//给大于2的字体添加颜色为红色 不包含2 $(".contain li:gt(2)").css("color","red");
//给第二给属性改变字体样式 $(".contain li:eq(2)").css("font-size","15px");
});
</script>
</body>
</html>