2 选择器
基础选择器
标签选择器（元素选择器）
是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS 样式。
优点:能够快速为页面中同类型的标签统一设置样式 缺点:不能设计差异化样式,只能选择全部的当前标签
类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器 类名不可与标签名重合
语法:
.类名{
属性1:属性值;
属性2:属性值;
......
}如:将所有拥有red类的html元素均为红色
.red{
color:red;
}然后在需要设置的标签中将它的class属性指定为类名即可,如:
<div class='red'>红色</div>多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签简单理解就是一个标签有多个名字.
语法:
class="类1 类2 ......"如:
<div class="front-color-red front-size-big background-color-blue">原神</div>id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。 HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义。 语法:
#id名{
属性1:属性值1;
属性2:属性值2;
......
}示例:
#pink{
color:pink;
}
<div id="pink">粉色</div>id选择器只能调用一次,若页面有一个标签调用了一个id选择器,其他的标签就不能再调用这个id选择器了 id选择器一般用于页面唯一的元素上,通常和js搭配使用
通配符选择器
通配符选择器使用定义，它表示选取页面中所有元素（标签） 通配符选择器不需要调用,定义好之后自动调用 更改所有标签的属性(包括<html></html>,<body></body>等标签)
语法:
*{
属性1:属性值1;
属性2:属性值2;
......
}复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
- 复合选择器可以更准确、更高效的选择目标元素（标签）
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代
后代选择器的元素可以是任意基础选择器
元素1 元素2{
样式声明
}如:将所有ol标签中li内容改为粉色
ol li{
color: pink;
}更改的是子元素的样式 子元素中的子元素样式也一并更改 如果一些特殊子标签中的子标题样式不一致可以在下面使用后代选择器更改
ol li a{
color:red;
}如果有另一组相同标签但内容不同的元素需要使用不同的颜色,可以使用类选择器+后代选择器使保留其他相同标签样式不变的情况下更改自己的标签 如:
.nev li a{
color:yellow;
}
<ul class="nev">
<li>蒙德</li>
<li><a>璃月</a></li>
</ul>子选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素，
选择元素1里面的所有直接后代（子元素）元素2 但是元素1中的其他元素中的元素2不会被选择
元素1 > 元素2{
样式声明
}.nev > a{
color: aqua;
}
<div class="nev">
<a href="#">儿子</a><!-- 变色 -->
<p>
<a href="#">孙子</a><!--不变色-->
</p>
</div>并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明 并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
元素1,元素2{
样式声明
}逗号可以理解为和的意思 并集选择器通常用于集体声明
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="sheep">
<li>喜羊羊</li>
<li>懒羊羊</li>
<li>灰太狼</li>
</ul>将熊大熊二改为黄色:
div,p{
color: yellow;
}将熊大熊二以及喜羊羊懒洋洋灰太狼都改为黄色
div,p, .sheep li{
color: yellow;
}伪类选择器
链接伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*大选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/在a标签中鼠标的行为
a:link{
color: rgb(57, 57, 219);
text-decoration: none;
}
a:visited{
color: rgb(158, 88, 219);
text-decoration:underline;
}
a:hover{
color: aqua;
}
a:active{
color: red;
}建议使用伪类选择器时按顺序声明,否则有可能不会生效 因为a标签在浏览器中具有默认样式,所以在实际工作中通常给a单独指定样式
焦点伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
input:focus{
background-color:yellow;
}贡献者
pinkdopeybug版权所有
版权归属：
