web知识点-优快云博客

本文链接：https://blog.youkuaiyun.com/Hhjian524/article/details/82708159

本文深入讲解了CSS中的各种选择器，包括ID选择器、Class选择器、标签选择器、通配符选择器、行间样式、伪类选择器及属性选择器等。详细解释了每种选择器的用法与特性，如ID选择器的一一对应关系，Class选择器的多对多关系，以及伪类选择器中的hover元素如何增强交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html中的注释：
1.注释的格式<!--要注释的功能-->
2.注释的两个主要功能：1.注释不要的代码 2.调试程序，查询代码哪里出现了错误
3.主要的快捷键：Ctrl+s

CSS的选择器类型：
1.id选择器：<!--一个元素只能有一个id值 ，id是一一对应的关系。-->
<div id="only" >123</div>
创建一个CSS的文件：
#only{
	background-color: yellow;
	font-size: 50px;
	width: 100px;
	height: 100px;
	border-radius: 20%;
}
<!--id值的前面一定要有#号-->
2.class选择器：<!-- class和元素的关系是多对多的关系，一个class可以有多个元素，一个元素可以有多个class。 -->
<div class="only">708</div>
创建一个CSS的文件：
.only{
	background-color: blue;
	font-size: 80px;
	width: 200px;
	height: 200px;
	<!--使用class选择器的时候要注意class值的元素前面要加.,例如.only-->
3.标签选择器:标签是可以当作选择器是使用
example:
<div>123</div>
应用CSS文件：
div｛
   background-color: blue;
	font-size: 80px;
	width: 200px;
	height: 200px;
｝
4.通配符选择器 (*)但凡是标签，都能被选择器选择-
5.行间样式
example:我们在标签里面定义元素的样式
<div style="background-color: yellow; font-size:20px;color: green;">123555666</div>
<!--行间样式是在标签里面定义的-->
6.伪类选择器:本人觉得伪类选择器是在CSS中比较常用的一种选择器之一，也是比较复杂的一种选择器，hover是伪类选择器的重要元素。
example：
定义一个链接：<a href="http://www.baidu.com">www.baidu.com</a>
<a href="http://www.taobao.com">www.taobao.com</a>
<a href="http://www.jingdong.com">www.jingdong.com</a>
应用CSS文件：a:hover{
	text-decoration: underline;
	background-color: #f40;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	font-family: arial;
	border-radius: 10px;
	![这里写图片描述](https://img-blog.youkuaiyun.com/2018091420063743?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hoamlhbjUyNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
7.属性选择器
8.伪元素选择器