Web基础：CSS中的选择器

最新推荐文章于 2023-07-10 15:06:49 发布

孤心_AUTO

最新推荐文章于 2023-07-10 15:06:49 发布

阅读量270

点赞数

分类专栏： #web前端基础文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_73058235/article/details/128515858

版权

#web前端基础专栏收录该内容

12 篇文章 3 订阅

订阅专栏

在网页设计中，为了使用CSS对HTML页面中的元素实现一对一，一对多，多对多的控制，这就需要CSS选择器的辅助，接下来为小编为大家介绍常用的选择器

一.标签选择器：

标签名{
属性1：属性值1;
属性2：属性值2;
...}

元素名称（属性：属性值；）如：div p h1 img a span sm i strong等

1）标签选择器就是以文档语言对象类型（标签）作为选择符，即使用结构中的标签作为选择符

2）所有的页面都可以作为选择符，例如：

h1{
    color: aqua;
    background-color: blue;
}
div{
    color: red;
    background-color: black;
}

二.id选择器：

#id名{
属性1：属性值1;
}

1）当我们使用id选择器时，应该为每个元素定义一个属性，例如:<div id="box"></div>

2）id选择器的语法格式前"#id"加上自定义的id名，例如:#box{width:300px; height:300px"}

3）起名字时要取英文名，不可使用标记和属性

4）一个id名称只能对应文档中的一个具有元素对象，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            color: red;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box">111111111</div>
</body>
</html>

我们尝试运行上述代码

三.类选择器:

在网页设计如果我们想要差异化选择不同的标签，单独选⼀个或者某⼏个标签，则可以使⽤类选择器。

.类名{
属性1：属性值1;
}

类名前面有“.”，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ibm{
            color: red;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="ibm">111111111</div>
    <div class="ibm">111111111</div>
    <div>111111111</div>
    <div>111111111</div>
</body>
</html>

我们尝试运行上述代码