前端零基础入门（九）：css选择器一

最新推荐文章于 2024-04-22 00:36:11 发布

/*----无忧----*/

最新推荐文章于 2024-04-22 00:36:11 发布

阅读量339

点赞数 1

分类专栏：前端零基础入门

本文链接：https://blog.csdn.net/q213546879/article/details/82996281

版权

前端零基础入门专栏收录该内容

12 篇文章 0 订阅

订阅专栏

最近很多同学问到选择器的问题，在这里给大家整理一下这一块的东西吧。

那什么是css选择器呢?

简单理解一下：如果我们需要给某个html元素加上css样式的话，有三种不同的方法，这个在我之前的文章里面有说到过：

《前端零基础入门（五）：如何在页面当中引用css样式》

在这就不再一一赘述了。

最常用的方法就是用外联样式，然后通过css选择器选择不同的元素，为其加上不同的样式。也就是说我们从事前端工作，在开发页面的过程中是肯定绕不开css选择器的，其重要性也就不言而喻了。

废话不多说，我们来看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height:100px;
            background: #1b6d85;
        }
    </style>
</head>
<body>

<div id="box"></div>

</body>
</html>

得到的结果是这样的：

那么在这一段代码中，有一个style标签，里面写的就是css样式：

#box{
    width: 100px;
    height:100px;
    background: #1b6d85;
}

这段代码中就用到了选择器，这段代码选择了一个ID名称为box的元素，并为其加上我们想要的样式，这里面的选择器就是前面的：#box{} 前面的“#”标识符表示这个选择器将会选择ID名称，并不能选择其他的属性。而紧跟其后的"box"则是代表要选择的ID属性的值。然后后面是大括号，大括号里面写的就是css样式了。这个选择器也叫ID选择器。

那么除了ID选择器以外，还有很多其他的选择器，最常见的有类选择器,如“.box{}”；这就是一个类选择器，千万要注意，在选择器的名字前面有一个点哦！还是来看看代码把。之前的样式其实也可以这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height:100px;
            background: #1b6d85;
        }
    </style>
</head>
<body>

<div class="box"></div>

</body>
</html>

注意这段代码和上一段代码的一个区别：其中div标签身上的ID属性被替换成了class属性，其里面的值还是没有变化，还是box。

第二个区别就是css部分，一个很小的改变：box前面的“#”变成了“.”；那么这个点代表的就是这个选择器选择的是一个class属性

小总结一下：

#box{}/*这是ID选择器，注意前面是用井号开头的，井号代表ID*/
.box{}/*这是class选择器，注意前面是用点开头的，点代表class*/

除了这两个选择器之外，还有：

标签选择器：顾名思义，也就是选择某一些标签

包含选择器：这个是一个组合选择器，由一个选择器包含住另一个选择器来实现精确查找

群组选择器：各种选择器组合在一起，选择一组元素

下面来看一下这些选择器的一个使用场景：

1，标签选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height:100px;
            background:#0c5460;
        }
    </style>
</head>
<body>

<h1></h1>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>
<p></p>
<h2></h2>

</body>
</html>

比如这种情况，一堆的标签，当你并不想给这些标签加上任何的属性，然后你又需要选中所有的div标签那么这时候就可以使用标签选择器。标签选择器的组成是：标签名+大括号；

注意：这个选择器前面不需要加任何的标识符。名字也不是随便起的，名字就是标签名，代表选择某一个标签。

2，包含选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 em{
            color: red;
        }
    </style>
</head>
<body>

<h1>
    这里是标题<em>重要内容</em>
</h1>

</body>
</html>

当我们需要选择em标签的时候，其实在这个案例里面可以直接使用em{}这个标签选择器，但是我们在正常的开发中，html结构比这个要复杂很多，那么这时候为了避免选中其他的元素，我们就需要用到包含选择器："h1 em{}" 这个选择器的意思是在h1标签里面选择em标签。这个选择器也叫后代选择器，

注意：包含选择器之间一定要用空格隔开。另外，包含选择器选择的是所有的后代，比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 span{
            color: red;
        }
    </style>
</head>
<body>

<h1>
    这里是标题<em>重要<span>的</span>内容</em>
</h1>

</body>
</html>

比如这里的包含选择器：h1 span{}同样能选中h1标签里面的span标签，尽管span标签被em所包含，但是依然能够选中，这一点一定要注意。

另外，包含选择器还有一种，叫子级选择器，这个选择器的写法是：h1>span{},中间不再是空格，而是一个大于号。这个选择器的意思是在h1的子元素里面选择span元素，在上面的代码块中 span元素其实算是h1标签的孙级元素，所以用这个子级元素是不能选中span标签的

注意：

<h1>
    这里是标题<em>重要<span>的</span>内容</em>
</h1>

在这个结构中，用 h1 span{} 这个选择器可以选中span元素，如果用 h1>span{} 这个选择器则不能选中span元素。

3，群组选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 span,h2 span,p>span{
            color: red;
        }
    </style>
</head>
<body>

<h1>
    这里是标题<em>重要<span>的</span>内容</em>
</h1>
<h2>
    <span>这里是副标题</span>
</h2>
<p>
    <span>这里是内容</span>
</p>

</body>
</html>

比如这个结构，当我们需要同时选中不同元素所包含的span元素的时候，就可以用到群组选择器

其实也就是多个选择器之间用逗号分隔，这样做可以节省一些代码。这个选择器通常用在css reset里面。当我们需要对多个标签清除其样式的时候，就可以这样写：

<style>
    h1,
    h2,
    h3,
    h4,
    p,
    dl,
    dd{
        margin:0;
    }
</style>

稍微格式化一下就可以了。

下一节我们将介绍更多的css选择器以及选择器的优先级相关的知识点。

/*----无忧----*/

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端零基础入门（九）：css选择器一

最近很多同学问到选择器的问题，在这里给大家整理一下这一块的东西吧。那什么是css选择器呢? 简单理解一下：如果我们需要给某个html元素加上css样式的话，有三种不同的方法，这个在我之前的文章里面有说到过：《前端零基础入门（五）：如何在页面当中引用css样式》在这就不再一一赘述了。最常用的方法就是用外联样式，然后通过css选择器选择不同的元素，为其加上不同的样式。也就是说我们从...
复制链接

扫一扫