zoukankan      html  css  js  c++  java
  • CSS后代选择器可能的错误认识

    一、关于类选择器的一个问题

        CSS代码:

    .red { color: red; }
    .green { color: green; }

    HTML代码:
    <div class="red"><div class="green"><p>1. 颜色是?</p></div></div>
    <div class="green"><div class="red"><p>2. 颜色是?</p></div></div>
    第一行和第二行文字颜色分别是 绿 红
    原因:DOM越深的类名权重越高

    二、类选择器→后代选择器

    .red p { color: red; }
    .green p { color: green; }
    <div class="red"><div class="green"><p>1. 颜色是?</p></div></div>
    <div class="green"><div class="red"><p>2. 颜色是?</p></div></div>
    第一行和第二行文字颜色分别是  绿 绿
    原因:祖先选择器对应DOM无论多深多浅都是同一级别的,而最终起作用的是选择器声明在CSS样式中的顺序,即优先显示后面的CSS声明

    三、not选择器→后代选择器

    :not(.green)  p { color: red; }
    .green p { color: green; }
    <div class="red"><div class="green"><p>1. 颜色是?</p></div></div>
    <div class="green"><div class="red"><p>2. 颜色是?</p></div></div>
    第一行和第二行文字颜色分别是  绿 绿
     
  • 相关阅读:
    scrapy下载图片第一波
    scrapy之防ban策略
    xml之dtd约束
    Java jdbc相关
    XSS获取cookie
    反射型XSS & DVWA
    MySQL数据库设计规范
    SQL Server 查询指定时间是一年当中的第几周
    js验证15位或18位身份证
    C# Process.Start()
  • 原文地址:https://www.cnblogs.com/shierfen/p/5333957.html
Copyright © 2011-2022 走看看