01-选择器及其特点

1. CSS选择器
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

• 标签选择器
  标签选择器用于指定元素名称的所有元素

targetName: { }

• 类选择器
  .class 选择器选取带有指定类 (class) 的元素。

.className { }

• ID选择器
  id 选择器用于指定元素名称的所有元素

#idName: {}

• 全局选择器
  * 选择器选取所有元素 或某元素中的所有元素

* { }

• 子代选择器
  用于选取带有特定父元素的元素。如果元素不是父元素的直接子元素，则不会被选择

 element>element { }

• 后代选择器
  选择器用于选取元素内部的元素。

 element element { }

• 交集选择器
  选择器1选择器2 既···又··

div.hah  div#app

• 并集选择器
  用于同时选取多个元素

选择器1，选择器2 { }

• 兄弟选择器
  相邻兄弟选择器(给指定选择器后面紧跟的那个选择器选中的标签设置属性)
  通用兄弟选择器(给指定选择器后面所有选择器选中的所有标签设置属性)

选择器1+选择器2{ }
选择器1~选择器2{}

• 序选择器
  同级别的第几个
  同级别同类型的第几个

## 同级别中的选择器
1. first-child 选中同级别中的第一个标签
2. last-child 选中同级别中的最后一个标签
3. nth-child(n) 选中同级别中的第n个标签
4. nth-last-child(n) 选中同级别中的倒数第n个标签
5. nth-child(odd){} 选中奇数行的标签
6. nth-child(even){} 选中偶数行的标签

## 同级别同类型的选择器

1.first-of-type 选中同级别同类型的第一个标签
2.last-of-type 选中同级别同类型的最后一个标签
3.nth-of-type(n) 选中同级别同类型的第n个标签
4.nth-last-of-type(n) 选中同级别同类型的倒数第n个标签
5。nth-of-type(odd){} 选中同级别同类型的奇数行的标签
6.nth-of-type(even){} 选中同级别同类型的偶数行的标签

或者也可以通过

nth-child(2n+1)
nth-of-type(2n+1)
等来实现，通过传入不同的参数，来实现不同的效果

• 属性选择器(根据指定的属性名称找到指定的标签)

// 含有alt属性的img标签
img[alt]{}

// 属性class的值为value的p标签
p[class=value]{}

// 属性值alt的值中以vlaue开头的img标签
img[alt^=value]{}

// 属性值alt的值以value结尾的img标签
img[alt$=value]{}

// 属性值alt的值中包含vlaue的img标签
img[alt*=value]{}

在企业开发中，id一般情况下是给js使用的，所以除非特殊情况，否则不要使用id去设置

CSS三大特性
1、层叠性
所谓层叠性是指多种CSS样式的叠加

2、继承性
所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

注意点

在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承
继承性中的特殊性
所有字相关的都可以继承，字体、文本属性等网页中通用的样式可以使用继承。例如，字体、字号、颜色、行距等

并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素宽高属性。
所有盒子相关的属性都不能继承。 a标签 h1 标签不会实现继承

3.CSS的优先级

• 什么是优先级？
  当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定
• 间接选中就是指继承
  如果是间接选中，那么就是谁离目标标签比较近就听谁的
• 优先级判断的三种方式
  
  • 相同选择器(直接选中)
    如果都是直接选中，并且都是同类型的选择器，那么就是谁写在后面就听谁的(后面的会把前面的覆盖)
  • 不同选择器(直接选中)
    如果都是直接选中，并且不是相同类型的选择器，就会按照选择器的优先级来层叠
    优先级排序(由高——>低)
    id > 类 > 标签 >通配符 > 继承 >浏览器默认

内联样式最大，内联样式的优先级最高。
ID选择器的优先级，仅次于内联样式。

!important

什么是important
作用:用于提升某个直接选中标签的选择器中的某个属性的优先级。可以将被指定的属性的优先级提升为最高

注意点

important只能用于直接选中，不能用于间接选中
通配符选择器选中的标签也是直接选中的
!important只能提升被指定的属性的优先级，其他属性的优先级不会被提升
!important 须写在属性值的分号前面
!important前面的感叹号不能省略

权重问题

什么是优先级的权重？
作用：当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高

权重的计算规则

首先计算选择器中有多少个id，id多的选择器优先级最高

如果id的个数一样，那么再看看类名的个数，类名个数多个优先级最高
如果类名的个数一样，那么再看标签名称的个数，标签名称个数多的优先级最高
如果id个数一样，类名个数也一样，标签名称个数也一样，那么就不会继续往下计算了，此时谁写在后面就听谁的(优先级相同时，后面的会把前面的覆盖)
注意点

只有选择器是直接选中标签的时候才需要计算权重

权重会叠加
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，具体如下：
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

所有都相同时，声明靠后的优先级大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式
important > 内联 > ID > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承