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>
    第一行和第二行文字颜色分别是  绿 绿
     
  • 相关阅读:
    sql基础资料
    monkeyrunner自动化测试
    monkey命令
    加密类
    程序生成SiteMapPath文件
    Asp.net 后台调用js方法(转)
    C# 文件粉碎
    【乱搞】【AOJ-149】简易版最长序列
    【乱搞】【AOJ-59】09年3月选拔赛第4题
    关于java 线程池 ThreadPoolExceutor 之 TestDemo
  • 原文地址:https://www.cnblogs.com/shierfen/p/5333957.html
Copyright © 2011-2022 走看看