寒假：jQuery

最新推荐文章于 2022-01-06 09:36:45 发布

Foog。青陵

最新推荐文章于 2022-01-06 09:36:45 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43071351/article/details/87033937

本文深入讲解了CSS选择器的各种类型，包括基本选择器、层次选择器、属性选择器等，并通过实例展示了如何使用这些选择器精确选取网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过CSS选择器选取元素：
基本选择器
层次选择器
属性选择器
通过过滤选择器选择元素：
基本过滤选择器
可见性过滤选择器

标签选择器：基本过滤选择器，可见性过滤选择器ement 。根据给定的标签名匹配元素。$(“h2” )选取所有h2元素

类选择器：.class，根据给定的class匹配元素， $(" .title")选取所有class为title的元素

ID选择器：#id 。根据给定的id匹配元素。 $(" #title")选取id为title的元素
并集选择器 selector1,selector2,…,selectorN 。将每一个选择器匹配的元素合并后一起返回。 $(" d i v, p, . t i t l e ") 选取所有 d i v 、 p 和拥有 c l a s s 为 t i t l e 的元素全局选择器 * 。匹配所有元素。$ ("*" )选取所有元素

1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图书简介</title>
</head>
<style>
    body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{
        margin: 0;
        padding: 0;
    }
    body{
        font-family: "å¾®è½¯é›…é»‘";
        font-size: 12px;
        line-height: 28px;
    }
    #book{
        margin: 5px auto 0 auto;
        width: 650px;
        overflow: hidden;
    }
    .imgLeft{
        float:left;
        width: 210px;
    }
    .imgLeft img{width: 200px;}
    .textRight{
        float: right;
        width: 440px;
    }
    #book h1{font-size: 16px; line-height: 50px;}
    .textRight dl{padding-left: 5em;}
    .textRight dl dd{display: none;}
    #jdPrice p{ display:inline;}

</style>
<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>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/book.js"></script>
</body>
</html>