css---六种选择器

最新推荐文章于 2024-03-11 18:48:29 发布

阿陈陈陈

最新推荐文章于 2024-03-11 18:48:29 发布

阅读量691

点赞数

分类专栏： css 笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_46218101/article/details/120261662

版权

笔记同时被 2 个专栏收录

60 篇文章 1 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

web前端入门笔记之css（2)

目录：
1、元素选择器
2、属性选择器
3、id选择器
4、class选择器
5、群组选择器
6、层级选择器

CSS选择器：

css选择器主要是用于选择需要添加样式的html元素。
对于css来说，它的选择器有很多，我们主要介绍以下几种:

元素选择器
这是最常见的选择器，简单说，文档中的元素就是选择器
注意：div在style里，style在head标签里
在这里插入图片描述

属性选择器
如果需要选择有某个属性的元素，而不论属性是什么，可以使用属性选择器

在这里插入图片描述

id选择器
id选择器使用**#引入，它引用的是id属性中的值。
注意：style标签的位置在head标签里面。
div标签里面需要添加id的值**与前面的#div1相对应
在这里插入图片描述

具体代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#div1{
			background: gray;width: 100px;height: 100px;
		}
	</style>
</head>
<body>
<div id="div1">这是一个div</div>
</body>
</html>

类选择器
类选择器使用时,需要在类名前加一个点号(.)
项目中，绝大部都是用类选择器排版

在这里插入图片描述

id选择器和类选择器不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

id选择器和类选择器相同点：可以应用于任何元素
在实际操作中：最开始将id与class选择器出现在同一“*.css”文件中，结果不能正常显示；后来看到上面结论后，反而没有上面的限制条件了。

群组选择器：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.a1,.a2{
			background: gray;width: 100px;height: 100px;
		}

	</style>
</head>
<body>
<div class="a1">这是一个div</div>
<div class="a2">这是第二个div</div>
<div class="a3">这是第二个div</div>
<p class="a1">lala </p>
<p class="a2">lala </p>
<p class="a3">lala </p>
</body>
</html>

结果截图：
在这里插入图片描述

层级选择器
Id、元素、类、属性选择器的结合（自行嵌套写代码试试看）
在这里插入图片描述

阿陈陈陈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css---六种选择器

web前端入门笔记之css（2)CSS选择器css选择器主要是用于选择需要添加样式的html元素。对于css来说，它的选择器有很多，我们主要介绍以下几种:元素选择器这是最常见的选择器，简单说，文档中的元素就是选择器注意：div在style里，style在head标签里属性选择器如果需要选择有某个属性的元素，而不论属性是什么，可以使用属性选择器id选择器id选择器使用**#引入，它引用的是id属性中的值。注意：style标签的位置在head标签里面。div标签里面需要添加id的值*
复制链接

扫一扫