HTML中三大基础选择器

最新推荐文章于 2023-06-06 19:04:53 发布

CHMBK

最新推荐文章于 2023-06-06 19:04:53 发布

阅读量3.3k

点赞数

分类专栏： HTML 文章标签：选择器

本文链接：https://blog.csdn.net/CHMBK/article/details/101025065

版权

6 篇文章 0 订阅

订阅专栏

HTML中的三大选择器

1）标签选择器

标签选择器其实就是我们经常说的html代码中的标签。例如html、span、p、div、a、img等等；比如我们想要设置网页中的p标签内一段文字的颜色，那么css代码就如下所示：

<style>
	p{
	color：red；
			}
</style>
<body>
	<p>我是一段文字</p>
</body>

在这里插入图片描述

2）类选择器

类选择器在我们今后的css样式编码中是最常用到的，它是通过为元素设置单独的class来赋予元素样式效果。

<head>
    <style>
        .p1{
          color: red;
      }
    </style>
</head>
<body>
<p class="p1">我是一段文字</p>
</body>

在这里插入图片描述
注意：
1、类选择器都是使用英文圆点（.）开头；
2、每个元素可以有多个类名，，名称可以任意起名（但不要起中文，一般都是与内容相关的英文缩写）
3、类选择器只会改变类下的元素样式，而不会改变其它标签的默认样式；

3）ID选择器

ID选择器类似于类选择符，作用同类选择符相同，但也有一些重要的区别。

使用语法：

<head>
    <style>
        #p1{
          color: red;
      }
    </style>
</head>
<body>
<p class="p1" id="p1">我是一段文字</p>
</body>

在这里插入图片描述
注意：

1、ID选择器为标签设置id=“ID名称”，而不是class=“类名称”。

2、ID选择符的前面是符号为井号（#），而不是英文圆点（.）。

3、ID选择器的名称是唯一的，即相同名称的id选择器在一个页面只能出现一次；

关注

专栏目录