CSS选择器几种常见用法

最新推荐文章于 2025-02-28 11:10:39 发布

原创最新推荐文章于 2025-02-28 11:10:39 发布 · 475 阅读

CC 4.0 BY-SA版权

文章标签：

在这里插入图片描述
——————————————————————————————————————————————————————————————————————
定义： CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML（超文本标记语言）或XML（可扩展标记语言）文档外观和格式的样式表语言。
作用： CSS主要用于控制网页的视觉呈现，使其页面看起来更加美观提高用户感受。
选择器： CSS选择器通常选中HTML元素中的参数，来更改元素的属性。

常见的有以下几种：

1.元素选择器🏷️

-----🌰-----🌰------🌰-------🌰-------🌰------

<body>
    <div>见到你很高兴</div>
    <a>nice to meet you</a>
</body>

语法格式： 标签名称 { }
只对选中元素的颜色，选中a标签元素进行颜色更改

<style>
  a {
    color: red;
  }
</style>

在这里插入图片描述

2.类选择器（.class）

-----🌰-----🌰------🌰-------🌰-------🌰------

<body>
    <a>见到你很高兴</a>
    <a class="hello">nice to meet you</a>
</body>

语法格式： .class名称 { } 对所有class属性相同名称进行更改（“.”不要忘记）
选中元素标签为a，属性class为hello的标签进行颜色更改

<style>
.hello {
    color: red;
}
</style>

在这里插入图片描述

3.id选择器（#id）🆔

-----🌰-----🌰------🌰-------🌰-------🌰------

<body>
    <a id="hello">见到你很高兴</a><br>
    <a class="hello">nice to meet you</a>
</body>

语法格式： #id名称 { } 每个元素id是唯一的，不可重复
选中元素标签为a，属性id为hello进行颜色更改

<style>
#hello {
    color: red;
}
</style>

在这里插入图片描述

4.通配符选择器（*）

-----🌰-----🌰------🌰-------🌰-------🌰------

<body>
    <a id="hello">见到你很高兴</a><br>
    <a class="hello">nice to meet you</a>
    <div>nice to meet you too</div>
</body>

语法格式： * { } *是通配符表示选中所有元素
将所有元素颜色更改成红色

<style>
* {
    color: red;
}
</style>

在这里插入图片描述

5.复合选择器

-----🌰-----🌰------🌰-------🌰-------🌰------

<body>
<ul>        <!--  one  -->
    <li>            <!--  two  -->
        <a id="hello">见到你很高兴</a><br>           <!--  three  -->
        <a class="hello">nice to meet you</a>      <!--  three  -->
        <div>nice to meet you too</div>            <!--  three  -->
    </li>
</ul>
</body>

语法格式： 多个元素之间的阶级关系 { } 自由组合选中不同阶级元素
选中第三阶级的第三个元素，更改其颜色，关系为：ul li div 同理第二个元素则为：ul li a

<style>
    ul li div {
        color: red;
    }
</style>

在这里插入图片描述
区别： id和class选择器最大的区别，在于元素中的id属性是唯一的不可重复，class选择器可以重复选中元素进行更改。