CSS必学基础：CSS选择器概念

基本选择器：标签选择器、ID选择器、类选择器、通用选择器

标签选择器

通过标签选择元素。无论标签隐藏多深，标签选择器都可以选中。标签选择器选择的所有相同元素而不是一个元素。所有的HTML标签都可以是选择器。

在实际开发中，常用标签选择器进行样式修改的HTML标签元素有a、li、img

ID选择器

id属性是标准属性，任何的HTML标签都可以有id属性；使用id选择器时，要在id值前加上“#”；id选择器只能选中一个元素，同一个页面要保证id的唯一性；不同元素有相同id也是非法；定义id时，必须要以字母开头，可以包含数字、下划线等符合；定义id时，不要与标签名相同。

类选择器

class属性是标准属性，任何HTML元素都可以有class属性；使用class属性是，要在前面加“.”；class选择器可以被多个元素共同使用，不同元素可以有相同的class值；同一个元素可以有多个class类名，要使用空格隔开；尽量使用类选择器，而不是id选择器

通用选择器

可以选中页面中的所有元素；使用通配符“*”进行选择；

后代选择器

后代选择器描述的是一种祖先结构关系，并不一定是父子关系；祖先和后代之间要有一个空格隔开，如.class .main{}；标签选择器、id选择器、class选择器都可以在并集选择器中使用。

并集选择器

并集选择器同时选中多个元素，选择时要用“,”隔开；标签选择器、id选择器、class选择器都可以在并集选择器中使用。

交集选择器

交集选择器的格式：

.head.foot{
样式
}

交集选择器要同时满足多个条件，通常设置2个条件；选择器之间没有空格，没有“,”等分割符。交集选择器不能使用id选择器，可以使用标签选择器、class类选择器；标签选择器放在前面，类选择器放在后面；如果两个都是类选择器，则无所谓位置。

序列选择器：第一子元素和最后子元素选择器

第一子元素选择器：

h3:first-child{

选择的是h3元素中，是h3的第一个子元素，也就是body下的第一个h3，必须同时满足两种条件才能选中

}

最后子元素选择器:

h3:last-child{

选择的是h3元素中，是h3的第一个子元素，也就是body下的最后一个h3，必须同时满足两种条件才能选中

}

序列选择器一般用于列表中。

序列选择器：nth-child选择器

li:nth-child(5){

选中的是li的父元素中的第5个li元素

}

选中所有奇数li:nth-child(2n+1){选中所有奇数的li元素}

选中所有偶数li:nth-child(2n){选中偶数}

选中指定列li:nth-child(-n+6){n从0开始，选中前6个}

选中指定列li:nth-child(n+3){n从0开始，选中后第3个之后的所有元素}

选中指定列li:nth-child(n+3):nth-child(-n+8){n从0开始，选中后第3开始到第8个结束}

选中指定列li:nth-child(3n+1){n从0开始，选中1，4，7...li子元素}

CSS继承性

1.后代元素会继承祖先元素的样式

2.只能继承文字、文本样式，其他样式不能继承

3.color，text-*，font-*，line-*这几种都可以继承

CSS叠加性和层叠性

CSS叠加性：当多个选择器选中的是同一个或同一类html元素时，加的是不一样的样式，所有选择器都会生效。

CSS层叠性：当多个选择器选中的是同一个或同一类html元素时，加的是一样的样式，只有一个选择器会生效。

CSS优先级

优先级从低到高：

1.继承样式<浏览器预设样式<通用选择器<标签选择器<class类选择器<id选择器<行内样式

2.选择的越精确，优先级越高；当优先级相同时，后面的样式会覆盖前面的样式