day11-CSS-三大特性

谷歌开发者工具

• 展示样式--三个点
• 小箭头--防止鼠标的时候，可以知道是哪行标签
• 手机--响应式开发
• style--当前选择标签的css，白色部分是自己设置的，灰色部分是系统设置的
  • 还可以直接更改样式，便于调试
  • 哪个文件的哪一行设置的

继承性

• 作用：给父元素设置一些属性，子元素也可以使用，这个就成为继承性
• 注意点：
  • 1️⃣并不是所有的属性都可以继承，只有以color、font、text、line开头的属性才可以继承
  • 2️⃣在CSS的继承中，不仅仅是儿子可以继承，只要是后代都可以继承
  • 3️⃣CSS继承性中的特殊性
    • ①a标签的文字颜色和下划线是不能继承父类的
    • ②h标签的文字大小是不能继承父类的，只能指定h标签进行更改
• 应用场景
  • 一般设置网页的共性信息，例如网页的文字颜色、字体、文字大小等进行统一设置

层叠性

• 作用：CSS处理冲突（同时设置多次属性）的一个特性
  • 只有在多个选择器选择了同一个标签，设置相同属性时会产生层叠性
  • CSS：Cascading StyleSheet
  • 最终显示哪个也可以通过google开发者工具看

优先级

• 作用：当多个选择器选中同一个标签，并设置相同属性时如何层叠是由优先级来决定的
• 优先级判断3种方式
  • 1.是否直接选中：间接选中是指继承
    • 间接选中时，就近原则---谁离目标标签近就显示谁
  • 2.是否是相同的选择器
    • 如果都是直接选中，并且是同类型的选择器，由上往下执行代码，谁在下面就显示谁
  • 3.不同的选择器（重点）
    • id>类>标签>通配符>继承>浏览器默认

优先级之important

• 作用：用于提升选中标签的选择器中某属性的优先级
• 注意点：
  • 1️⃣必须是直接选中，间接选中无效
  • 2️⃣写在属性值分号前面设置属性后!important -- 优先级会比id高
  • 3️⃣通配符选择器是直接选中，不是间接选中
  • 4️⃣！important只会提升属性优先级，不会将整个选择器中设置的所有属性提升
  • 5️⃣感叹号不能省略

权重问题

• 作用：当多个选择器混合使用时，可以计算其权重来判断谁优先级高
• 规则
  • 1️⃣首先计算选择器中有几个id，id多的选择器优先级最高
  • 2️⃣如果id个数一样，再看类名
  • 3️⃣类名一样，看标签名称个数，显示多的
  • 4️⃣如果id、类名、标签个数都相同则优先级相同，从上到下原则，谁在下面显示谁
• 注意点：选择器必须要直接选中标签，权重才有效；通配符权重为0；多个选择器直接选中时有important的时候，权重也是最高的