首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第四讲 CSS选择器

第四讲 CSS选择器

作者头像
剽悍一小兔
发布2019-11-26 13:56:05
4010
发布2019-11-26 13:56:05
举报

课程概要

这一讲,我们会学习CSS中几种常用的选择器。首先,什么是css选择器?像我们之前的写法,都是直接给标签名设置css,这样会有一个很严重的问题,比如一旦我们给div设置高度为100px,那么所有的div高度都是100px,这种效果肯定不是我们想要的。为了给不同的标签设置不同的样式,就需要选择器。

站长建议:视频只是作为知识点补充,不要一开始就直接看视频,最好是在阅读之后,带着疑问去看视频。

步骤1:ID选择器

先复制下面的代码,作为素材。

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>

</head>
<body>

    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>梨子</li>
        <ul>
            <li>烤山药</li>
            <li>酥梨</li>
            <li>窝窝头</li>
        </ul>
    </ul>

</body>
</html>

效果:

image.png

ul 和 li 是无序列表,效果就如图所示,大家可以用调试工具自行验证ul和li分别是行内标签还是块级标签。现在,让我们给ul设置背景色为粉红色。来吧。

<style type="text/css">
    ul {
        background-color: pink;
    }
</style>

image.png

看到了吗,弟兄们,独自占满一整行,是什么标签来着。让我听到你们的答案好吗??

对了,是块级标签!好啦,记住啦,下次类似的标签自己验证咯~

ok,我们继续,现在我希望让苹果的颜色变成红颜色,就可以用ID选择器,看代码:

image.png

懂了吧,这就是ID选择器!有一种,emmm.... , 点对点的意思,ID是唯一的哦~~

image.png

步骤2:类选择器

哇,ID选择器好简单哦~~鼓掌,吧唧吧唧。

什么?你说有没有那种可以一下子选很多的选择器,有啊有啊!快看,它来了,它就是类选择器。比如,现在我要让香蕉和梨子的颜色全部变成黄色,对的,要很黄很黄哦,哈哈!那就需要类选择器啦。看!

image.png

image.png

效果:

image.png

哇,快看,写这段代码的人好帅哦,看这段代码的人更帅~~哈哈哈,学会了吗,这就是类选择器!emmm, 怎么说呢,就是一种分类的概念,好像是一种神奇的徽章,贴上这种徽章的标签就变成了同一个模样。

步骤3:后代选择器

我现在要让烤山药,酥梨和窝窝头字体全部加粗,又该怎么做咧?办法当然有很多啦,比如你可以用ID选择器,一个个设置CSS,也可以用类选择器给这三个标签都加上同一个class。这里单纯为了介绍后代选择器,看代码:

image.png

image.png

image.png

成功啦,好简单哦~~鼓掌,吧唧吧唧。

后代选择器的要点,就是当中有一个空格。有的人可能会问,直接用类选择器不就好了?是的,的确可以,但是,万一别的ul里面也有item的类呢,那样不就把别的item也控制啦吗?用后代选择器的目的其实就是为了精确定位,即:是#list 里面的 .item ,而不是其他的 .item。

步骤4:直接子元素选择器

这个选择器跟后代选择器很像,但是又有不同,刚才的例子,后代选择器能够取到任意子代,也就是说,不管你嵌套了多少层标签,都可以取到。而直接子元素选择器,只能取到下一代。比如我写这样的代码:

#list>li {
    font-size: 30px;
}

哇,快看,写这段代码的人好帅哦,看这段代码的人更帅~~效果:

image.png

可以看到,只有第一层的 li 的字体变大了,里面一层的 li 不受影响,这就是直接子元素选择器。(注意,没有空格!)

全部代码:

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
<style type="text/css">
    ul {
        background-color: pink;
    }

    #apple {
        color: red;
    }

    .yellow {
        background-color: yellow;
    }

    #list .item {
        font-weight: 600;
    }

    #list>li {
        font-size: 30px;
    }
</style>

</head>
<body>

    <ul id="list">
        <li id="apple">苹果</li>
        <li class="yellow">香蕉</li>
        <li class="yellow">梨子</li>
        <ul>
            <li class="item">烤山药</li>
            <li class="item">酥梨</li>
            <li class="item">窝窝头</li>
        </ul>
    </ul>

</body>
</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档