CSS-基础选择器与复合选择器

---

前言

记录了一些学习CSS过程中关于选择器的学习笔记

一、基础选择器

在CSS的基础选择器中，有四种基础选择器

基础选择器	作用
标签选择器	编辑html中某一标签下的样式
类选择器	通过定义类编辑某一类中的样式
id选择器	通过定义id编辑某一标签下的样式
通配符选择器	编辑body全局中的样式

下面给出一些实例：

1.标签选择器

p {
	font-weight:400;
	color: red;
}

2.类选择器

.class1 {
	text-align: center;
	text-decoration: none;
}

在使用类选择器时，需要在对应标签中注明类，例如：

<p class="class1">文字</p>

3.id选择器

#color {
	color= red;
}

与类选择器相似，在使用id选择器时，需要在对应标签中注明id，例如：

<p id="color">文字</p>

id选择器与类选择器的区别在于，id选择器在全局中只能使用一次。

4.通配符选择器

*{
	font-family:"Apple Braille",serif;
}

二、复合选择器

在CSS中，有四种常用的复合选择器，这些选择器由基础选择器复合而成：

复合选择器	特点
后代选择器	可以按层级顺序选择元素
子选择器	选择最近的下一层元素
并集选择器	可以同时选择多个元素
伪类选择器	可以给链接增加特殊效果

1.后代选择器

后代选择器可以根据层级顺序选择想要的元素
例如：

<div class="nav">
<p>我是一行文字</p>
</div>

若想通过后代选择器更改标签p中的文字样式，可以按class"nav"->p的顺序进行编辑：

.nav p{
	color:red;
	text-decoration:underline;
}

2.子选择器

子选择器只选择最近一级的元素，例如：

<div class="nav">
<a href="#">我是第一行文字</a>
<p><a href="#">我是第二行文字</a>

若只想更改第一行文字，可以使用子选择器：

.nav>a
{
	color:red;
}

3.并集选择器

并集选择器可以同时选择多个元素，例如：

nav1 nav2 nav3{
	color:red;
}

可以对nav1，nav2，nav3三个class的样式进行更改

4.伪类选择器

伪类选择器可以对链接的样式进行一些更改

(1)链接伪类选择器

链接伪类选择器有如下四种样式：

链接伪类选择器	特点
a:link	选择所有未被访问的链接
a:visited	选择所有访问过的链接
a:hover	选择光标经过的链接
a:active	选择活动链接

注：活动链接指鼠标已经点击，但页面尚未打开时的链接

我们可以通过链接伪类选择器更改链接在不同状态下的样式，以最常用的a:hover为例

a:hover{
	color:blue;
}

在光标经过链接时，链接文字将变成蓝色的样式

(2)focus伪类选择器

focus伪类选择器可以编辑input输入框的样式
例如，可以修改输入框的边框颜色为绿色，背景颜色为蓝色：

input:focus{
outline: 1px solid green;
background-color:blue;
}