前端学习-CSS基础选择器（十）

marshalVS

于 2024-09-27 19:43:08 发布

阅读量437

点赞数 13

文章标签：学习

本文链接：https://blog.csdn.net/m0_74246993/article/details/142600911

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

加油骚年，本文主要讲解css基础选择器的使用，属于重点呢

CSS选择器的作用

根据不同需求把不同标签选出来就是选择器的作用，简单来说，这就是选择标签用的

选择器分类

选择器分为基础选择器和复合选择器两大类

基础选择器

由单个选择器构成

基础选择器包括：标签选择器，类选择器，id选择器和通配符选择器

标签选择器

用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

标签名{

属性1：属性值1；

属性2：属性值3；

属性2：属性值2；

}

作用

把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签

优点

能快速为页面中同类型的标签统一设置样式

<style>

p{

color: brown;

font-size: 35px;

}


</style>

<body>

<p><strong>一个简单的例子</strong></p>

<p><strong>一个不简单的例子</strong></p>

</body>

类选择器

使用场景

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器类选择器在 HTML 中以 class 属性表示，在CSS 中，类选择器以一个点“.”号显示

注意

① 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义，我们自己命名的)

②可以理解为给这个标签起了一个名字，来表示

③ 长名称或词组可以使用中横线来为选择器命名

④不要使用纯数字、中文等命名，尽量使用英文字母来表示.⑤命名要有意义，尽量使别人一眼就知道这个类名的目的。

语法

结构需要class属性来调用class类的意思

<div class='red'> 变成红色</div>

<style>

.red{

color: red;

}


</style>

<body>

<ol>

<li>

<span class="red">HTML</span>

</li>

<li>

<span class="red">CSS</span>

</li>

<li>

<span class="red">JS</span>

</li>

</ol>

</body>

多类名开发

(1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面

(2)这些标签都可以调用这个公共的类,然后再调用自己独有的类

注意

各个类名中间用空格隔开简单理解:就是给某个标签添加了多个类，或者这个标签有多个名字这个标签就可以分别具有这些类名的样式从而节省CSS代码,统一修改也非常方便多类名选择器在后期布局比较复杂的情况下，还是较多使用的

语法格式

<style>

.red{

color: red;

}

.box{

width: 100px;

height: 100px;

background-color: blue

}

.green{

background-color: green;

}


</style>

<body>

<ol>

<li>

<span class="red box" >HTML</span>

</li>

<li>

<span class="green box">CSS</span>

</li>

<li>

<span class="red">JS</span>

</li>

</ol>

</body>

id选择器

id 选择器可以为标有特定id的 HTML 元素指定特定的样式。HTML 元素以id 属性来设置id 选择器，CSS 中 id 选择器以“#"来定义。

语法

<style>

#pink {

background-color: pink;

}


</style>

<body>

<p id="pink">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>

</body>

id选择器和类选择器(class)的区别

好比人的名字，一个人可以有多个名字,同时一个名字也可以被多个人使用。

id 选择器好比人的身份证号码，全中国是唯一的，不得更复

id 选择器和类选择器最大的不同在于使用次数上

类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

简而言之，id选择器只能调用一次，别人切勿调用

通配符选择器

在CSS中，通配符选择器使用“#”定义，表示选取页面中所有的元素

语法

<style>

*{


color: aquamarine;

width: 500px;

height: 500px;


}


</style>

<body>

<h1>Hello world</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>



</body>