CSS选择器与三大特性

1、基础选择器

选择器	作用	缺点	用法
标签选择器	可以选出所有相同的标签，如p，使用较多	不能差异化选择	p{color: blue; }
类选择器	可以选出一个或多个标签使用非常多	可以根据需求选择	.nav{ color: blue;}（nav:类名）
id选择器	一次只能选择一个标签，不推荐使用	只能使用一次	#eg{ color: blue;}（eg：id名）
通配符选择器	选择所有的标签，不推荐使用	选择的太多，有部分不需要	*{ color: blue;}

2、复合选择器

• 目的是为了选择更准确更精细的目标元素标签。
• 复合选择器就是由两个或者多个基础选择器，通过不同方式组合而成的。

选择器	作用	特征	用法
后代选择器	用于选择元素后代，使用较多	选择所有的子孙后代	符号是空格.nav p{color: #000;}
子代选择器	选择最近一级元素，使用较少	只选择亲儿子	符号是>.nav>p{color: #000;}
交集选择器	选择两个标签交集的部分，使用较少	既是…又是,	没有符号p.nav{color: #000;}
并集选择器	选择某些相同样式使用较多	可以用于集体的声明	符号是逗号p,.nav{color: #000;}
链接伪类选择器	给链接更改状态，使用较多		重点记住a{}和a:hover{}等

3、CSS三大特性

（1）层叠性（即后浪推前浪）

• 相同选择器相同属性设置相同样式，此时一个样式会覆盖另一个样式。
• 样式冲突遵循的是就近原则。
• 样式不冲突则不会层叠。

（2）继承性（即子承父业）

• 子标签会继承父级的某些样式，如文本颜色、字体等。
• 以text-、font-、line-开头的元素以及color属性等都可以继承。

（3）优先级

• 当一个元素指定多个选择器时，则有优先级的产生。
• 当选择器相同则执行层叠性。
• 当选择器不同，则根据选择器权重执行。

选择器	权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=“”	1，0，0，0
！important	无穷大

• 权重由四组数字组成，但是不会进位
• 值从左到右，左面最大，一级大于一级，级别之间不可超越。
• 复合选择器的权重会叠加但不会进位。