0基础和小Q学前端---css（1）常见的选择器及使用场景

智达教育‍

于 2022-10-12 10:19:30 发布

阅读量420

点赞数 1

分类专栏：前端进阶文章标签：前端 css css3

本文链接：https://blog.csdn.net/qq_29235677/article/details/127270027

版权

前端进阶专栏收录该内容

14 篇文章 1 订阅

订阅专栏

📢📢📢📣📣📣
哈喽！大家好，我是「奇点」，江湖人称 singularity。刚工作几年，想和大家一同进步🤝🤝
一位上进心十足的【Java ToB端大厂领域博主】！😜😜😜
喜欢java和python，平时比较懒，能用程序解决的坚决不手动解决😜😜😜

✨ 如果有对【java】感兴趣的【小可爱】，欢迎关注我

❤️❤️❤️感谢各位大可爱小可爱！❤️❤️❤️
————————————————

如果觉得本文对你有帮助，欢迎点赞，欢迎关注我，如果有补充欢迎评论交流，我将努力创作更多更好的文章。

👩‍🏫：之前我们介绍了css的入门和css样式的书写方法，今天我们就正式学习css的使用，讲一讲其中的选择器，并介绍一下不通的选择器的使用场景。

👩‍🏫我们首先来说一下什么是选择器：

选择器故名思义有选择功能。选择器用于“查找”（或选取）要设置样式的 HTML 元素

我们可以将 CSS 选择器分为五类：

元素选择器
类选择器
id选择器
通配符选择器
派生选择器

此节会讲解最基本的 CSS 选择器。

元素（标签）选择器

标签选择器我们之前在写样式的时候是使用过的，之前的这种div{}就是使用了标签选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: turquoise;
        }
    </style>
</head>

<body>
    <div>
        测试标签选择器
    </div>
</body>

</html>

这里定义的是div的标签，在进行渲染的时候，就是根据我们的div样式将div标签中的内容设置成我们设置的样式。

这里常用的是组合选择器，例如下面把p标签组合一下。

例如下面的例子，将div和p标签同时写在下面的css样式种，这时就成为了组合标签。

    <style>
        div,
        p {
            color: turquoise;
        }
    </style>

这是p标签和div标签一起形成了组合标签。同理，多个标签能够一起编写，简化了我们对相同样式的编写。

类选择器

   <style>
        .classtest {
            color: violet;
        }
    </style>

 <!-- 类选择器 -->
    <div class="classtest">

    </div>
    <!-- 类选择器 -->

这是我们就定义了一个类选择器使用的时候只需要加class的内部属性，样式的配置方法是.类名

类选择器有很多用法

结合标签使用

 <div class="classtest">
        类选择器
    </div>
    <p class="classtest">类选择器结合标签p</p>
    <!-- 类选择器 -->

此时结合标签使用 div.classtest


    <!-- 类选择器 -->
    <style>
        div.classtest {
            color: violet;
        }
    </style>

    <!-- 类选择器 -->

</head>

<body>
    <!-- 元素选择器 -->
    <!-- <div>
        测试标签选择器
    </div>
    <p>组合标签测试b</p> -->
    <!-- 元素选择器 -->


    <!-- 类选择器 -->
    <div class="classtest">
        类选择器
    </div>
    <p class="classtest">类选择器结合标签p</p>
    <!-- 类选择器 -->

</body>

多类选择器

class="xiaodi background"

使用两个类选择器，这样就有两个类选择器的属性了

    <style>
        .classtest {
            color: violet;
        }
        
        .background {
            background-color: tomato;
        }
    </style>



      <div class="xd background">测试多类选择器的测试</div>

只有两个类选择器都满足才能实现，只有一个都话不会产生效果

 <style>
        .classtest.background {
            color: violet;
            background-color: tomato;
        }
    </style>

 <div class="classtest background">测试多类选择器的测试</div>

id选择器

id选择器的使用方法和类选择器的使用方法类似，只有较小的改变，需要注意的是：id选择器的id值在整个html文档中只能唯一，防止js在进行操作的时候导致多个id相同时的混淆问题。

将class改成id
id在设置的时候使用#来设置样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 注意id选择器的属性值在html文档中只能出现一次 避免js在获取id时出现混淆 -->
    <style>
        #idselect {
            color: red;
        }
    </style>

</head>

<body>
    <div id="idselect">
        测试id选择器
    </div>
</body>

</html>

通配符选择器

通配符选择器就相对来说简单了，就是一个*号表示的是通配符，文档中的所有组件的样式都会设置成这个通配符选择器，只是他的优先级是最低的，其他的样式都会覆盖这个样式（设置了的）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: rgb(132, 0, 255);
        }
    </style>
</head>

<body>
    <div>休闲鞋√</div>
</body>

</html>

通配符选择器最常用的就是设置margin和padding两个属性设置成全局的默认值。

<style>
        * {
            margin: 0;
            padding: 0;
            /* color: rgb(132, 0, 255); */
        }
    </style>

派⽣选择器

后代选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p i {
            color: violet;
        }
    </style>
</head>

<body>
    <div>
        <p>
            <i>我是斜体</i> 测试后代选择器
        </p>
    </div>
</body>

</html>

这里的后代选择器就是一个层层选拔的过程，当父子都满足的时候，两个条件同时满足的才能生效，就像上面的例子，只有i标签的才生效了，p中的由于只满足了一个条件，所以不能生效。

这里的自元素只要是相同的，相当于都能传递下去。

<body>
    <div>
        <p>
            <i>我是斜体
                <i>我是斜体子元素</i> 测试后代选择器
            </i> 测试后代选择器

        </p>
    </div>
</body>

子元素选择器：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1>p {
            color: teal;
        }
    </style>
</head>

<body>
    <h1>
        <p>子元素1</p>
    </h1>
    <h2>
        <p>子元素2</p>
    </h2>
</body>

这里的h2中的p标签就没有改变属性

我们再看一种情况

<body>
    <h1>
        <p>子元素1
            <p>孙元素1</p>
            <p>子元素3</p>
            <h2>是子h</h2>
        </p>
    </h1>
    <h2>
        <p>子元素2</p>
    </h2>
</body>

这里只要是相同的标签就能够满足，如果是其他的标签，子元素是不能传递的

相邻（兄弟）选择器

两个标签有同一个父级,li+li只会设置第二个，从上往下找帝国s

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li+li {
            color: tomato;
        }
    </style>
</head>

<body>
    <ul>
        <li>前端</li>
        <li>后端</li>
        <li>测试</li>
    </ul>
    <ol>
        <li>电脑</li>
        <li>鼠标</li>
        <li>键盘</li>
    </ol>
</body>

👩‍🏫：选择器的内容相对来说较多，需要一点时间来消化，这里也是css的重点，需要认证学习一下。按照惯例我们也对这些选择器进行了整理。

分类	命名
元素（标签）选择器	以标签命名
类选择器	class设置的设置时以.xx命名使用时以xx引用
id选择器	以id进行设置，一个html文本中id唯一
通配符选择器	* 优先级最低
派生选择器	后代选择器
	子元素选择器
	相邻（兄弟）选择器

👨‍🏫今天的选择器就讲到这里了，后续我们会继续学习选择器相关的东西。

智达教育‍

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
0基础和小Q学前端---css（1）常见的选择器及使用场景

📢📢📢📣📣📣哈喽！大家好，我是「奇点」，江湖人称 singularity。刚工作几年，想和大家一同进步🤝🤝一位上进心十足的【Java ToB端大厂领域博主】！😜😜😜喜欢java和python，平时比较懒，能用程序解决的坚决不手动解决😜😜😜✨ 如果有对【java】感兴趣的【小可爱】，欢迎关注我❤️❤️❤️👩‍🏫：之前我们介绍了css的入门和css样式的书写方法，今天我们就正式学习css的使用，讲一讲其中的选择器，并介绍一下不通的选择器的使用场景。
复制链接

扫一扫