css选择器和三大特性

选择器

将选择进行划分为三大部分

• 基本选择器
  1. 类名：.class
  2. 标签: div
  3. 属性: input[type="eamil"] | a[href*="https://www.***.com"]
  4. ID: #id
• 伪类选择器
  1. 结构伪类: :nth-child(n) | :nth-of-type(n) | :hover | :nt-of-type(nth-child 选择父元素里面的第几个子元素,不管是第几个类型;nt-of-type 选择指定类型的元素)
  2. 伪元素: ::before | ::after
• 组合选择器
  1. 相邻兄弟 a + b
  2. 普通兄弟 a ~ b
  3. 子选择器 a > b
  4. 后代选择器 a b

特性

css三大特性是css最重要的部分，可以说如果了解了这三大特性就对css掌握了一半，这个是重在理解

1. 层叠性：css样式冲突采取的原则
2. 继承性：对于部分属性样式会有天生的继承
3. 优先级：选择器优先级算法

  CSS 的层叠性

       所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个样式通过两个相同选择器设置到同一个元素上，那么这个时候一个样式就会将另一个样式层叠掉 

      原则：

• 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
• 样式不冲突，不会层叠

 CSS 的继承性 

      子标签会继承父标签的某些样式， 想要设置一个可继承的属性，只需将它应用于父元素即可，注意点：在CSS的继承中不仅仅是子级可以继承, 只要是后代都可以继承。

           可继承的属性

 

            控制继承 

        四个属性

1. inherit: 被应用属性继承父级的该属性（默认就是该值）
2. initial初始化，把应用属性初始为它默认的样式，并且排除继承的干扰（即不在默认继承，而是表现出没有任何设置时候的默认样式）
3. unset：意思是恢复其原本的继承方式。
4. revert: 效果等同于unset且浏览器支持有限。

CSS 的优先级 

    要想了解优先级，肯定得了解选择器，这就是先简单说选择器的原因。

    我们平时定义CSS样式时，经常出现两个或更多选择器应用在同一元素上，此时，

1. 选择器相同，则执行层叠性

2. 选择器不同，就会出现优先级。

   规则 

• CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。
• CSS 优先规则2："直接样式"比"祖先样式"优先级高。
• CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
  1. ID 选择器， 如 #id{}
  2. 类选择器， 如 .class{}
  3. 属性选择器， 如 a[href="segmentfault.com"]{}
  4. 伪类选择器， 如 :hover{}
  5. 伪元素选择器， 如 ::before{}
  6. 标签选择器， 如 span{}
  7. 通配选择器， 如 *{}

        所有 CSS 的选择符由以上 7 种基础的选择器或者组合而成，组合的方式有 3 种：

1. 后代选择符： .father .child{}
2. 子选择符： .father > .child{}
3. 相邻选择符: .bro1 + .bro2{}

• CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
• CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。

错误的说法

在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100， 你可以理解为 99.99，所以最终应用后者样式。

 关注前端公众号(前端中心),获取更多前端技术,共同成长.