CSS常用选择器实践

举报
lwq1228 发表于 2021/07/09 09:55:19 2021/07/09
【摘要】 为了灵活地选择将要设置样式的元素，CSS提供了很多种选择器，此文介绍几种比较常用的，并提供样例。

CSS3选择器

1、标签选择器

顾名思义，标签选择器就是用标签名称作为选择器。

1.1、样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        figure {
            background-color: silver;
            width: 350px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }

        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<figure>
    <div></div>
    <div></div>
    <div></div>
</figure>
</body>
</html>

1.2、效果图

1.3、说明

尽管标签选择器用起来很简便，但缺点也很明显。
1、在一个复杂的页面或构图中，一定会有很多同名标签，那么多个元素就会共享相同的样式，本来共享是好事，能节约代码量，但问题出在共享的粒度实在太粗了，可能经常会出现我们预料之外的效果。
2、我们希望代码尽量语义化，也就是让我们的代码读起来就像读自然语言一样，这样便于理解和维护，但标准的HTML标签名并不能体现具体的业务含义。

2、类选择器

类选择器是指为元素指定一个class属性，也称为样式类，然后在样式表中通过这个属性值来引用元素。在CSS中以.class-name的格式来选择对应的元素。

2.1、样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .traffic-lights {
            background-color: silver;
            width: 350px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }

        .light {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            border-radius: 50%;
        }

        .red {
            background-color: coral;
        }

        .yellow {
            background-color: gold;
        }

        .green {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<figure class="traffic-lights">
    <div class="light red"></div>
    <div class="light yellow"></div>
    <div class="light green"></div>
</figure>
</body>
</html>

2.2、效果图

2.3、说明

可以为每个元素起不同的类名来区分每个元素，如red、yellow和green，也可以为有共同属性的元素起相同的类名，如light，还可以为一个元素分配多个类名，多个类名间用空格分隔，如light red。

3、后代选择器

DOM结构是树状结构，也就是元素可以一层一层地嵌套，便于有条理地组织内容。相应地，对于内层元素的类选择器，为了提高可读性，我们应该让它体现出DOM的层次结构，按照“父类 子类”的格式来书写。

3.1、样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tree {
            width: 30px;
            height: 300px;
            background-color: saddlebrown;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .tree .branch {
            width: 160px;
            height: 20px;
            background-color: peru;
            border-radius: 10px;
            display: flex;
            justify-content: flex-end;
            transform: rotate(-30deg);
        }

        .tree .branch .leaf {
            width: 40px;
            height: 40px;
            border-radius: 100% 0 100% 0;
            background-color: green;
            transform: translateY(-100%);
        }
    </style>
</head>
<body>
<figure class="tree">
    <div class="branch">
        <span class="leaf"></span>
        <span class="leaf"></span>
        <span class="leaf"></span>
    </div>
    <div class="branch">
        <span class="leaf"></span>
        <span class="leaf"></span>
    </div>
</figure>
</body>
</html>

3.2、效果图

3.3、说明

使用后代选择器，从技术上是为了避免选择到超出范围的元素，更重要的是，这样写能使语义更清晰，令CSS选择器与DOM结构保持同样的层级关系，例如.tree.branch .leaf就体现了“树干→树枝→树叶”这样的递进结构。

4、伪类选择器

伪类选择器用于选择处于特殊位置或状态的元素，例如选择一堆元素中的第1个或最后一个元素，或者隔一个选一个元素，或者选择处于鼠标指针悬停状态的元素。下面是其中几个常用的：

4.1、:first-child和:last-child

从名称一望即知，:first-child用于选择第1个元素，:last-child用于选择最后一个元素。

4.1.1、样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .triangle {
            width: 500px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .triangle div {
            height: 50px;
            margin: 5px;
            display: flex;
            justify-content: space-between;
        }

        .triangle div span {
            width: 50px;
            height: 50px;
            margin: 10px;
            background-color: lightgreen;
            border-radius: 50%;
        }

        .triangle div span:first-child,
        .triangle div span:last-child {
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<figure class="triangle">
    <div>
        <span></span>
    </div>
    <div>
        <span></span> <span></span>
    </div>
    <div>
        <span></span><span></span><span></span>
    </div>
    <div>
        <span></span><span></span><span></span><span></span>
    </div>
    <div>
        <span></span><span></span><span></span><span></span><span></span>
    </div>
    <div>
        <span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
</figure>
</body>
</html>

4.1.2、效果图

4.2、:nth-child()

:nth-child()伪类较为广泛的用法是:nth-child(odd)和:nth-child(even)，其中:nth-child(odd)表示选择所有第奇数个元素，:nth-child(even)表示选择所有第偶数个元素。

4.2.1、样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .chessboard {
            width: 400px;
            background-color: burlywood;
            border: 10px solid darkgray;
        }

        .chessboard div {
            display: flex;
        }

        .chessboard div span {
            width: 100px;
            height: 100px;
        }

        .chessboard div:nth-child(odd) span:nth-child(even),
        .chessboard div:nth-child(even) span:nth-child(odd) {
            background-color: rgba(0, 0, 0, 0.3);
        }

    </style>
</head>
<body>
<figure class="chessboard">
    <div>
        <span></span><span></span><span></span><span></span>
    </div>
    <div>
        <span></span><span></span><span></span><span></span>
    </div>
    <div>
        <span></span><span></span><span></span><span></span>
    </div>
    <div>
        <span></span><span></span><span></span><span></span>
    </div>
</figure>
</body>
</html>

4.2.2、效果图

4.3、:nth-child(an+b)

:nth-child()函数还可以接收一个形如an+b的表达式作为参数，其中a和b是整数，n是从0开始的自然数列，由此表达式得到的数列，即为被选中的元素的下标，元素的下标从1开始计算。

4.3.1、样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        figure {
            display: flex;
            justify-content: space-between;
        }

        figure div {
            width: 3vw;
            height: 3vw;
            background-color: lightgreen;
            border-radius: 50%;
            margin: 0.2vw;
        }

        figure div:nth-child(3n) {
            background-color: red;
        }

    </style>
</head>
<body>
<figure class="chessboard">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</figure>
</body>
</html>

4.3.2、效果图

4.5、:not()

:not()伪类用于排除掉一些元素，例如:not(:first-child)表示排除掉第1个元素，:not(:nth-child(3))表示排除掉第3个元素。

4.5.1、样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .prime-numbers {
            width: 400px;
            height: 400px;
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            counter-reset: n;
        }

        .prime-numbers div {
            counter-increment: n;
            position: relative;
            width: 30px;
            height: 30px;
        }

        .prime-numbers div::before {
            content: counter(n);
            position: absolute;
            width: inherit;
            height: inherit;
            background-color: lightgreen;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
        }

        .prime-numbers div:nth-child(2)::before,
        .prime-numbers div:nth-child(3)::before,
        .prime-numbers div:nth-child(5)::before,
        .prime-numbers div:nth-child(7)::before,
        .prime-numbers div:not(:nth-child(1)):not(:nth-child(2n)):not(:nth-child(3n)):not(:nth-child(5n)):not(:nth-child(7n))::before {
            background-color: orange;
        }

    </style>
</head>
<body>
<figure class="prime-numbers">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</figure>
</body>
</html>

4.5.2、效果图

4.5.3、说明

以上样例是从100个数字中挑选出素数，把素数的背景设置为橙色。这里的选择器共有5行。前4行分别把数字2、3、5、7标明为素数。第5行很长，我们拆开看，它的第1部分是.prime-numbers div，意思是所有<div>元素都被选中（被当作素数），后面跟随了5个:not()选择器，用于排除掉不是素数的数：:not(:nth-child(1))排除掉了第1个数，因为数字1不是素数，接下来:not(:nth-child(2n))排除掉了所有能被数字2整除的数，再接下来的:not(:nth-child(3n))、:not(:nth-child(5n))、:not(:nth-child(7n))排除掉了所有能被数字3、5、7整数的数，以上这些选择器都是连缀着一路写下来的，最后的::before表示设置选择的是以上剩余的元素的伪元素。

4.6、:hover

:hover表示当鼠标指针悬停在元素上时的状态，这个样式的用途是告知用户当前鼠标指针指在哪个元素上，我们经常在导航菜单、表单按钮上见到这种交互方式。

4.6.1、样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .word {
            display: flex;
        }

        .word div {
            width: 50px;
            height: 50px;
            background-color: lightgreen;
            border-radius: 50%;
            color: darkgreen;
            border: 1px dashed;
            font-size: 35px;
            font-family: sans-serif;
            text-align: center;
            line-height: 50px;
            transition: 0.5s 0.4s ease-out;
        }

        .word div:hover {
            background-color: gold;
            transform: scale(1.5);
            transition: 0.5s ease-out;
        }
    </style>
</head>
<body>
<figure class="word">
    <div>E</div>
    <div>L</div>
    <div>E</div>
    <div>M</div>
    <div>E</div>
    <div>N</div>
    <div>T</div>
    <div>S</div>
</figure>
</body>
</html>

4.6.2、效果图

4.6.3、说明

设置鼠标指针悬停在字母上时的样式，其中的transform用于把字母变大；transition用于增加缓动效果，也就是字母不是一下子变大的，而是在0.5s内逐渐变大的。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS HTML
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入