选择器的作用: 选择标签

可以将选择器分成两类

1. 基础选择器

   • 标签选择器
   • 类选择器
   • id选择器
   • 通配符选择器

2. 复合选择器

1. 基础选择器

① 标签选择器

用HTML标签名作为选择器
只能一次选择同标签的所有样式，不能差异化

标签名 {
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
    ...
}

② 类选择器 .class

差异化选择不同标签
样式点定义，结构类调用，一个或多个，开发最常用

.类名 {
    属性1:属性值1;
    ...
}

class="类名1 类名2"
类名自己定义, 有命名规范，可以多类名

③ id选择器 #id

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

#id名 {
    属性1:属性值1;
    ...
}

id="id名"

id和class的区别

class相当于人名，id相当于身份证号

7.4 通配符选择器 *

选取页面所有元素（标签）
不需要调用，自动就给所有元素使用样式

* {
    属性1:属性值1;
    ...
}

7.5 总结

基础选择器	作用	特点	使用情况	用法
标签选择器	选出所有相同标签	不能差异化选择	较多	标签名
类选择器	选出一个或多个标签	可以根据需求选择	非常多	.
id选择器	一次只能选择一个标签	ID属性只能在每个HTML文档中出现一次	一般和JS搭配使用	#
通配符选择器	选择所有标签	选的太多，有部分不需要	特殊情况使用	*

8. 复合选择器

8.1 后代选择器

又称为包含选择器，可以选择父元素里面子元素
表示选择元素1里面的所有元素2

元素1 元素2 { 样式声明 }

元素可以是任意的基础选择器

8.2 子元素选择器 >

只能选择作为某元素的最近一级子元素(亲儿子)

元素1>元素2 { 样式声明 }

8.3 并集选择器 ,

选择多组标签，同时为他们定义相同的样式

元素1, 元素2 { 样式声明 }

8.4 伪类选择器 :

向某些选择器添加特殊的效果

8.4.1 链接伪类选择器

LVHA顺序不能颠倒

a:link     /* 选择所有未被访问的链接 */
a:visited  /* 选择所有已被访问的链接 */
a:hover    /* 选择指针位于其上的链接 */
a:active   /* 选择活动链接(鼠标按下未弹起的链接) */

常用

a {
    color:gray;
}
a:hover {
    color:red;
}

8.4.2 :focus 伪类选择器

用于选取获得焦点(光标)的表单元素

input:focus {
    background-color:yellow;
}

8.5 总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	选择后代元素	可以是子孙后代	较多	空格
子代选择器	选择最近一级元素	只选亲儿子	较少	>
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	,
链接选择器	选择不同状态的链接	跟链接相关	较多	lvha
:focus选择器	选择获取光标的表单	跟表单有关	较少	input:focus