CSS基础之CSS选择器

最新推荐文章于 2024-04-28 17:46:18 发布

格子学前端

最新推荐文章于 2024-04-28 17:46:18 发布

阅读量497

点赞数 20

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

本文链接：https://blog.csdn.net/m0_61794291/article/details/122646918

版权

43 篇文章 5 订阅

订阅专栏

31 篇文章 1 订阅

订阅专栏

17 篇文章 1 订阅

订阅专栏

前言

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

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

    <style>
        标签名 {
            属性1: 属性值1;
            属性2: 属性值2;
        }
    </style>

    <style>
        .类名 {
            属性1: 属性值1;
        }
    </style>

	<body>
    	<div class="类名">内容</div>
	</body>

注意点：

我们可以给一个标签指定多个类名，从而达到更多的选择的目的

	<body>
    	<div class="类名1 类名2">内容</div>
	</body>

注意点：

使用场景与作用：

    <style>
        #id名 {
            属性1: 属性值1;
        }
    </style>

	<body>
    	<div id="id名">内容</div>
	</body>

注意点：

CSS 中，通配符使用*定义，它表示选取页面中所有元素 (标签)

    <style>
        * {
            属性1:属性值1;
        }
    </style>

注意点：

    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签	不能差异化选择	较多	p { color : red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color : red;}
id选择器	一次只能选择1个标签	id属性只能在每个HTML文章中出现一次	一般和JS搭配	#nav { color : red;}
通配符选择器	选择所有标签	选择较多，有部分不需要	特殊情况使用	* { color : red;}

关注