css的四种选择器

css定义在head里面

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

1、标签选择器

语法：
选择器 {样式}
即：给谁改样式 {改什么样式}

<head>
    <style>
		p {color: red;}
    </style>
 </head>	
 </body>
  	    <p>欢迎大家</p>
 </body>

选择器是用于指定css样式的html标签，花括号内是对该对象设置的具体样式
属性和属性值以键值对的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色
属性和属性值之间用英文":""分开
多个键值对之间用英文";"进行区分

2、类选择器

语法：
类名 {样式}
例如 .red {color: red;} 调用时class=red

<html>
	<head>
	   <style>
		.red  {color: red;}
       </style>
  </head>	
	
  </body>
  <p class="red">欢迎大家</p>
  </body>
</html>

类选择器使用"."(英文符号)进行标识后面紧跟类名(自定义，我们自己定义)
不要使用纯数字、中文等命名，尽量使用英文字母来表示

类选择器的口诀

样式点定义，结构类调用，一个或多个，开发最常用。

多类名使用

<html>
	<head>
	   <style>
		.red  {color: red;}
		.font {font-size: 20px}
       </style>
  </head>	
	
  </body>
  <p class="red font">欢迎大家</p>
  </body>
</html>

在标签class属性中写多个类名
多个类名之间必须用空格分开

3、id选择器


```html
<html>
	<head>
	   <style>
		#red  {color: red;}
       </style>
  </head>	
	
  </body>
  <p id="red">欢迎大家</p>
  </body>
</html>

id选择器口诀

样式#定义，结构id调用，只能调用一次，他人切勿使用。

id选择器和类选择器的区别

id选择器是唯一的，只能调用一次，类选择器是可重复的调用

4、通配符选择器

在css通配符选择器使用"*"定义，他表示选取页面中所有的元素（标签）
语法：
* {属性1：属性值1;}

<html>
	<head>
	   <style>
		*{color: yellow;}
       </style>
  </head>	
	
  </body>
  <p>欢迎大家</p>
  </body>
</html>

通配符选择器不需要调用，自动给所有的元素使用样式

原文链接：https://blog.csdn.net/weixin_49213878/article/details/122159018