CSS 的选择器有哪些？？？

1.通配符（*）

也可称作全局选择器或者通用选择器，顾名思义，就是定义所有的元素的样式。常用于默认的一些样式，增加页面的美感！

* {
		padding: 0;
		margin: 0;
}

2.标签选择器

也可称作元素选择器，例如 div , p, img 等等。

div{
		width: 30vw;
		height: 100vh;
		background-color: rgb(51, 57, 81);
	}
p {
      font-size: 1.6vw;
	  color: #111111;
	  line-height: 3vw;
	  text-align: center;
	  font-weight: bold;
  }

3.类选择器

类名不能以数字开头，必须以 .号开头。一个页面的类名可以重复。例如 .类名{ } 的形式。class一组一组的

<div class="box" > </div> 

 .box{
            height: 50px;
	        width: 50px;
	        margin-top: 7px;
	 }

 4.ID 选择器

以#开头，一个页面不能出现相同的 id 名称。（注意：#后面首字母不能是数字）

<div id="box" > </div> 

 #box{
            height: 50px;
	        width: 50px;
	        margin-top: 7px;
	 }

5.并列选择器

就是几个选择器需要设置同样的样式，中间用逗号隔开。例如 span,p{ color:red;} ,设置 span 标签和 p 标签的字体颜色都为红色。

#one,#two,#three,#four {
			width: 60vw;
			height: 28vw;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 5vw;
			margin-top: 5vw;
		}

6.父子选择器

就元素是父子的关系，改变的是儿子。选择器之间用空格隔开，例如 div h1{ font-size:60px;} ，设置 div 标签内的 h1标签的字体大小为 60像素。这里必须是 div 里面的 h1才可以改变样式。

.big img{
			width: 25vw;
			height: 25vw;
		}

7.子选择器

以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块)

div>p{
       padding: 0;
	   margin: 0; 
}
    

 <div>和<p>父子关系

<div>
    <p></p>
    <p></p>
</div>

 

8.包含选择器

以空格隔开包含关系的元素，(模块名模块名，修饰空格前模块内所有该模块)。查找某一个元素中的某一个元素。

<div id="one">
    <p id="first"></p>
    <p></p>
</div>
<div id="two">
    <p></p>
    <p></p>
</div>

/*选择第一个div中的所有p元素*/
#one p{
       padding: 0;
	   margin: 0; 
}
/*选择第一个div中的第一个p元素*/
#one #first{
       color：red; 
}

 9.兄弟选择器

 

以~隔开兄弟关系的元素(模块名~模块名 修饰~前模块往下的所有兄弟模块)

选择的不是本身，而是他的兄弟

.first~p{
    margin: 0;
	padding: 0;
}

<div>
    <p class="first"></P>
    <p></P>
    <p></P>
    <p></P>
</div>

10.相邻选择器

 

以+隔开相邻关系的元素(模块名+模块名 修饰加号前模块往下的相邻的模块 只一个)   (9和10注意区别)

 

.first~p{
    margin: 0;
	padding: 0;
}

 

/*只选择first下面的第一个p元素*/
<div>
    <p class="first"></P>
    <p></P>
    <p></P>
    <p></P>
</div>

12.群选择器

以，分隔(逗号分隔开需要修饰的模块名)

<div>
    <p class="first"></P>
    <p></P>
    <span></span>
    <p></P>
    <p></P>
</div>

 

.first,span{
    margin: 0;
	padding: 0;
}

13.属性选择器

[] ([type=text]修饰属性为type=text的模块)

<div>
    <p class="first"></P>
    <p></P>
    <span></span>
    <input type="text">
    <p></P>
</div>

 

 

14.伪类选择器

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

    (1) li:first-child{} (修饰第一个li)

li:first-child{
			background: red;
		}

    (2) li:last-child{} (修饰最后一个li)

li:last-child{
			background: blueviolet;
		}

    (3) li:nth-child{} (修饰第()个li)，从一开始数

li:nth-child(2){
			background: cyan;
		}

    (4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)  （参考上面几个一起用）

li:not(:first-child){
			border: 5px solid goldenrod;
		}

优先级：

ID 选择器 > 类选择器 > 标签选择器 > 通配符

优先级不用解释了吧，就是谁先加载运行，谁就是大哥咯

还有很多选择器就不一 一 介绍了，什么伪类选择器，伪 ID 选择器。

分享一下个人在学习css时的小技巧，在布局是想要看自己的改变哪个元素位置和改变时加上宽高和背景颜色，就很容易看出你的元素变化，方便自己做出下一步改变，在不需要时直接注释就行。